有没有一种方法可以将Twitter Bootstrap Modal窗口动画从下滑效果更改为fadeIn或仅在不显示幻灯片的情况下显示?我在这里阅读了文档:
http://getbootstrap.com/javascript/#modals
但是他们没有提到任何更改模态车身滑动效果的选项。
只需fade
从模式div中删除该类。
具体来说,更改:
<div class="modal fade hide">
至:
<div class="modal hide">
更新:对于bootstrap3,hide
不需要该类。
引导程序使用的模态使用CSS3提供效果,可以通过从模态容器div中消除适当的类来删除它们:
<div class="modal hide fade in" id="myModal">
....
</div>
如您所见,此模态具有的类.fade
,表示将其设置为淡入和.in
,表示将其滑入。因此,只需删除与要删除的效果相关的类,在您的情况下就是.in
该类。
编辑:只是运行了一些测试,似乎不是这样,.in
该类是由javascript添加的,尽管您可以使用CSS修改他slideDown的行为,如下所示:
.modal.fade {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
如果您希望模式淡入而不是滑入(为什么.fade
仍要调用它?),则可以覆盖CSS文件中的类,或直接bootstrap.css
使用以下方法覆盖:
.modal.fade{
-webkit-transition: opacity .2s linear, none;
-moz-transition: opacity .2s linear, none;
-ms-transition: opacity .2s linear, none;
-o-transition: opacity .2s linear, none;
transition: opacity .2s linear, none;
top: 50%;
}
如果您不希望有任何效果,只需fade
从模态类中删除该类。
我相信这些答案大多数都是针对引导程序2的。我遇到了针对引导程序3的同一问题,并希望分享我的修正。就像我之前对bootstrap 2的回答一样,这仍然会导致不透明度消失,但不会进行幻灯片过渡。
您可以更改modals.less或theme.css文件,具体取决于您的工作流程。如果您没有花更少的时间在优质的时间上,我强烈推荐您。
少一些,在下面找到以下代码 MODALS.less
&.fade .modal-dialog {
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}
然后更改-25%
为0%
另外,如果仅使用CSS,请在中找到以下内容theme.css
:
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
然后将更-25%
改为0%
。
我通过.modal.fade
在我自己的LESS样式表中覆盖默认样式来解决此问题:
.modal {
&.fade {
.transition(e('opacity .3s linear'));
top: 50%;
}
&.fade.in { top: 50%; }
}
这将保持淡入/淡出动画,但会删除向上/向下滑动动画。
我找到了删除幻灯片但留下淡入淡出的最佳解决方案,是在选择的css文件中添加以下css,该文件在bootstrap.css之后调用
.modal.fade .modal-dialog
{
-moz-transition: none !important;
-o-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
}
我也不喜欢滑动效果。要解决此top
问题,只需将.modal.fade和modal.fade.in的属性设置为相同即可。您也可以top 0.3s ease-out
在过渡中将其移除,但将其保留下来也不会有任何伤害。我喜欢这种方法,因为淡入/淡出效果很好,它只会杀死幻灯片。
.modal.fade {
top: 20%;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.modal.fade.in {
top: 20%;
}
如果您正在寻找bootstrap 3的答案,请看这里
您还可以通过简单地删除“ top:-25%;”来覆盖bootstrap.css。
一旦删除,模态将简单地淡入和淡出,而无需幻灯片动画。
只需删除衰落类,如果您想在Modal上执行更多的动画,只需在Modal中使用animate.css类即可。
我正在使用bootstrap 3和Durandal JS 2模态插件。这个问题是Google搜索结果的重中之重,并且由于上述答案都无法解决我的问题,因此我想与其他访问者分享我的解决方案。
我用我自己的less覆盖了默认的Bootstrap的Less代码:
.modal {
&.fade .modal-dialog {
.translate(0, 0);
.transition-transform(~"none");
}
&.in .modal-dialog { .translate(0, 0)}
}
这样,我只剩下淡入淡出效果,而没有slideDown。
.modal.fade, .modal.fade .modal-dialog {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
问题很明确:仅删除幻灯片:以下是如何在Bootstrap v3中进行更改
在modals.less中注释掉translate语句:
&.fade .modal-dialog {
// .translate(0, -25%);
看看http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/
.modal.fade .modal-dialog
{
-moz-transition: none !important;
-o-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
}
想要更新此。你们大多数人还没有完成此问题。我正在使用Bootstrap3。以上修复程序均无效。
删除幻灯片效果,但保持淡入效果。我进入了bootstrap css,并(注意以下选择器)-这解决了该问题。
.modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}
.modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}
以下CSS对我有用-使用Bootstrap3。您需要在boostrap样式之后添加此CSS-
.modal.fade .modal-dialog{
-webkit-transition-property: transform;
-webkit-transition-duration:0 ;
transition-property: transform;
transition-duration:0 ;
}
.modal.fade {
transition: none;
}
只需从模态类中删除“ fade”类
class="modal fade bs-example-modal-lg"
如
class="modal bs-example-modal-lg"
文章标签:javascript , jquery , jquery-ui , twitter-bootstrap
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!