Twitter Bootstrap modal：如何移除 Slide down 效果

Question

有没有办法将 Twitter Bootstrap 模态窗口动画从向下滑动效果更改为淡入淡入或仅在没有幻灯片的情况下显示？我在这里阅读了文档：

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

但他们没有提到任何更改模态正文幻灯片效果的选项。

Answer 1

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

具体来说，改变：

<div class="modal fade hide">

到：

<div class="modal hide">

---

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

Answer 2

引导程序使用的模态框使用 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中覆盖这个类：

.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 的回答一样，这仍然会导致不透明度褪色，但会不进行幻灯片过渡。

您可以更改 modals.less 或 theme.css 文件，具体取决于您的工作流程。如果您没有花更少的时间度过任何美好的时光，我强烈推荐它。

为了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

我发现移除幻灯片但保留淡入淡出的最佳解决方案是在您选择的 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 7

我也不喜欢幻灯片效果。要解决此问题，您只需使 .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 8

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

Answer 9

您也可以通过简单地删除 "top:-25%;" 来覆盖 bootstrap.css

一旦移除，模态框将简单地淡入和淡出而没有幻灯片动画。

Answer 10

看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 11

我正在使用 bootstrap 3 和 Durandal JS 2 模态插件。这个问题在谷歌搜索结果之上，因为上面的答案都不适合我，我想我会为未来的访问者分享我的解决方案。

我在自己的 less 中用这个覆盖了默认的 Bootstrap 的 Less 代码：

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

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

Answer 12

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

Answer 13

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

在 modals.less 中注释掉 translate 语句：

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

Answer 14

只需从模态类中删除 'fade' 类

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

作为

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

Answer 15

想要更新这个。你们中的大多数人还没有完成这个问题。我正在使用 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 16

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