Twitter Bootstrap模式：如何删除向下滑动效果

Question

有没有方法可以将Twitter Bootstrap Modal窗口动画从幻灯片放下效果更改为淡入淡出效果或仅显示幻灯片？我经过这里的文档阅读：

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

但他们并没有提到对于改变模式身体滑动效果的任何选项。

Answer 1

只需从模态div中取出fade类。

具体而言，变化：

<div class="modal fade hide"> 

到：

<div class="modal hide"> 

---

UPDATE：对于bootstrap3，不需要hide类。

Answer 2

由引导使用CSS3使用的情态动词供应的影响，他们可以通过消除模态div容器适当的类中删除：

<div class="modal hide fade in" id="myModal"> 
    .... 
</div> 

正如你可以看到这个模式有一个类的.fade，这意味着它将被淡入并且.in，意味着它将滑入。因此，只需删除与您希望删除的效果有关的类，这在您的情况下就是.in类。

编辑：只是进行了一些测试，似乎不是的情况下，.in类是由JavaScript的添加，但你可以改变他了slideDown行为与CSS像这样：

.modal.fade { 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
} 

Demo

Answer 3

如果你想有模态渐显的，而不是幻灯片（为什么叫.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类。

Answer 4

我解决了这个由覆盖默认.modal.fade风格在我自己的LESS样式表：

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

这样可以使淡入/淡出的动画，但除去上滑/滑下动画。

Answer 5

我也不喜欢幻灯片效果。要解决这个问题，你需要做的就是使得.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回答，look here

Answer 6

您还可以通过简单地移除覆盖bootstrap.css “顶部：25％;”

一旦删除，模式将简单地淡入和淡出没有幻灯片动画。

Answer 7

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

您可以根据工作流程更改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%。

Answer 8

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

删除幻灯片的效果，但保持淡入。我进入引导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)*/} 

Answer 9

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

我覆盖默认引导的更少的代码与这在我自己少：

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

这样，我只剩下一淡入淡出效果，而且没有了slideDown。

Answer 10

我已经找到了最好的解决方案，去除幻灯片，但离开褪色是由其中的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; 
} 

Answer 11

.modal.fade, .modal.fade .modal-dialog { 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
} 

Answer 12

后调用你的艇员选拔的CSS文件中添加下列CSS

以下CSS适用于我 - 使用Bootstrap 3。 您需要的自举风格后加入这个CSS -

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

.modal.fade { 
    transition: none; 
} 

Answer 13

的问题是清楚的：除去只幻灯片：这里是如何改变它在引导V3

在modals.less注释掉翻译声明：

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

Answer 14

只需卸下褪色类，如果你想了解更多的动画是执行上的模态只使用animate.css类在你的情态。