Question

有没有办法将Twitter Bootstrap Modal窗口动画从滑动效果更改为fadeIn或仅显示没有幻灯片？我在这里阅读了文档：

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

但他们没有提及任何改变模态身体幻灯片效果的选项。

Answer 1

从模态div中取出fade类。

具体来说，改变：

<div class="modal fade hide">

为：

<div class="modal hide">

更新：对于bootstrap3，不需要hide类。

Answer 2

bootstrap使用的模式使用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;
}

Demo

Answer 3

如果您希望模式淡入而不是滑入（为什么它被称为.fade？）您可以在CSS文件中覆盖该类，或直接在bootstrap.css中覆盖此类：< / p>

.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

我相信这些答案中的大多数都是针对bootstrap 2.我遇到了同样的问题，因为bootstrap 3并想分享我的修复。就像我以前对bootstrap 2的回答一样，这仍然会产生不透明度淡化，但 NOT 会进行幻灯片过渡。

您可以更改modals.less或theme.css文件，具体取决于您的工作流程。如果你没有用更少的质量时间，我强烈推荐它。

for less，在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 5

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

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

这可以保持淡入/淡出动画，但会移除向上/向下滑动动画。

Answer 6

我也不喜欢滑动效果。要解决这个问题，您需要做的就是使.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 7

我找到了删除幻灯片但留下淡入淡出的最佳解决方案是在chops的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;
}

Answer 8

你也可以通过简单地删除“top：-25％;”

来覆盖bootstrap.css

一旦删除，模态就会在没有幻灯片动画的情况下淡入淡出。

Answer 9

只需删除淡入淡出类，如果要在模态上执行更多动画，只需在模态中使用animate.css类。

Answer 10

我正在使用bootstrap 3和Durandal JS 2模式插件。这个问题取决于Google的结果，因为上述答案都没有对我有用，我想我会为未来的访问者分享我的解决方案。

我用自己的简称覆盖默认的Bootstrap的Less代码：

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

这样我只剩下淡化效果，而且没有slideDown。

Answer 11

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

Answer 12

问题很明确：只删除幻灯片：以下是如何在Bootstrap v3中更改它

在modals.less中注释出翻译语句：

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

Answer 13

看看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;
}

Answer 14

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

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

Answer 15

以下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; 
}

Answer 16

只需从模态类中删除“淡入淡出”类

class="modal fade bs-example-modal-lg"

为

class="modal bs-example-modal-lg"

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

16 个答案: