Question

当我进食时

 Modal.show("experimentMakeAnOffer");

在Chrome浏览器控制台中，我的模式从左侧对角滑动。如何让我的模态从左侧水平（直线）滑动？

我曾尝试使用CSS研究如何调整模态（隐藏/被调用之前），但没有运气。任何帮助表示赞赏。

模板下方的模式：

 <template name="experimentMakeAnOffer">
    <div class="modal fade left" id= "experimentMakeAnOffer2">
        <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title">experimentMakeAnOffer  </h4>                </div>
            <div class="modal-body experimentMakeAnOffer">           
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitOffer btn-lg" data-dismiss="modal">Offer</button>
            </div>

        </div>
    </div>
</div>

我的CSS：

.modal.fade:not(.in).left .modal-dialog {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
}

Answer 1

你好检查下面更新的小提琴，我改变了你的代码并以另一种方式显示它希望它可以帮助你。

.modal.left .modal-dialog
{
position: fixed;
margin: auto;
width: 500px;
height: 100%;
-webkit-transform: translate3d(0%, 0, 0);
-ms-transform: translate3d(0%, 0, 0);
o-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content
{   
margin-top:40%;
height: 50%;
width:100%;
overflow-y: auto;
}   
.modal.left.fade .modal-dialog{
left: -320px;
-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
-moz-transition: opacity 0.3s linear, left 0.3s ease-out;
-o-transition: opacity 0.3s linear, left 0.3s ease-out;
transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{
left: 0;
}

Left side Modal Updated Fiddle

Answer 2

translate3d属性接受（X，Y，Z，angle）属性。

在CSS上，语句不一致，因为首先在-webkit-transform上将Y设置为20％，然后在transform上将其设置为0％，浏览器将只获取最后一个有效参数，例如在Chrome上，.model-dialog将在Y上呈现为0。

但是关于你要从左边显示的问题，你需要改变你的翻译的X位置而不是Y位置。

检查this fiddle以获得快速演示

Answer 3

对不起，伙计们，我专注于通过Chrome控制台中的编码从左侧制作模态幻灯片，在更改文件中的代码后，我没有费心保存我的JavaScript文件。以某种方式点击保存以保存我的JavaScript文件工作。模态现在按预期从左侧滑入。

谢谢你们！

如何让我的模态从左侧水平滑动？

3 个答案: