Twitter Bootstrap模式:如何删除幻灯片效果

有没有办法将Twitter Bootstrap Modal窗口animation从幻灯片放下效果更改为淡入淡出效果或仅显示没有幻灯片? 我在这里阅读文档:

http://getbootstrap.com/javascript/#modals

但是他们没有提到改变模态体滑动效果的select。

从模态div中取出fade类。

具体而言,更改:

 <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类。

编辑:只是跑了一些testing,似乎并非如此, .in类是由JavaScript添加,虽然你可以修改他的幻灯片行为与CSS像这样:

 .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类。

我相信这些答案中的大部分是bootstrap 2.我遇到了bootstrap 3的相同问题,并希望分享我的修复。 像我以前的引导2的答案,这仍然会做一个不透明的淡入淡出,但不会做幻灯片转换。

您可以更改modals.less或theme.css文件,具体取决于您的工作stream程。 如果你没有花更多的时间和精力,我会强烈推荐它。

为less,在MODALS.lessfind下面的代码

 &.fade .modal-dialog { .translate(0, -25%); .transition-transform(~"0.3s ease-out"); } &.in .modal-dialog { .translate(0, 0)} 

然后将-25%更改为0%

或者,如果您只使用CSS,请在theme.cssfind以下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%

我通过在我自己的LESS样式表中覆盖默认的.modal.fade样式来解决这个问题:

 .modal { &.fade { .transition(e('opacity .3s linear')); top: 50%; } &.fade.in { top: 50%; } } 

这使淡入/淡出animation保持不变,但消除了向上/向下滑动animation。

我也不喜欢幻灯片效果。 要解决这个问题,你需要做的就是使得.modal.fade和modal.fade.in的top属性相同。 在过渡阶段你也可以把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%; } 

如果你正在寻找引导3答案, 看看这里

我已经find了最好的解决scheme, 删除幻灯片,但离开淡出是通过添加以下CSS在您select的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:-25%”来覆盖bootstrap.css。

一旦删除,模式将简单地淡入和淡出幻灯片animation。

我正在使用bootstrap 3和Durandal JS 2模式插件。 这个问题是在谷歌的结果顶部,因为没有上述的答案是为我工作我想我会分享我的解决scheme为未来的访客。

我重写了默认的Bootstrap的Less代码,这个我自己less了:

 .modal { &.fade .modal-dialog { .translate(0, 0); .transition-transform(~"none"); } &.in .modal-dialog { .translate(0, 0)} } 

这样我只剩下淡入淡出的效果,并没有slideDown。

只要删除淡入淡出类,如果你想在莫代尔上执行更多的animation,只需在你的模态中使用animate.css类。

想要更新这个。 你们大多数人还没有完成这个问题。 我正在使用Bootstrap 3.以上修复没有工作。

删除幻灯片的效果,但保持淡入。我进入引导CSS和(注意到下列select器) – 这解决了这个问题。

  .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)*/} 
 .modal.fade, .modal.fade .modal-dialog { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } 

下面的CSS适用于我 – 使用Bootstrap 3.你需要在boostrap样式后添加这个CSS –

 .modal.fade .modal-dialog{ -webkit-transition-property: transform; -webkit-transition-duration:0 ; transition-property: transform; transition-duration:0 ; } .modal.fade { transition: none; } 

问题很明显: 删除幻灯片:以下是如何在Bootstrap v3中进行更改

在modals.less评论翻译声明:

 &.fade .modal-dialog { // .translate(0, -25%);