167

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

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

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

4

16 回答 16

364

fade只需从模态 div 中取出课程。

具体来说，改变：

<div class="modal fade hide">

到：

<div class="modal hide">

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

于 2012-08-03T22:05:14.950 回答
36

引导程序使用的模态使用 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;
}

演示

于 2012-04-13T15:13:28.590 回答
30

如果你喜欢让模态淡入而不是滑入（为什么要调用它.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从模态类中删除该类。

于 2012-08-15T22:06:07.563 回答
26

我相信这些答案中的大多数都是针对 bootstrap 2 的。我在 bootstrap 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%。

于 2013-11-04T21:30:33.333 回答
18

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

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

这会保留淡入/淡出动画，但会删除上滑/下滑动画。

于 2012-10-23T22:30:39.577 回答
12

我找到了删除幻灯片但留下淡入淡出的最佳解决方案是通过在您的选择的 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;
}
于 2014-06-04T12:29:18.840 回答
11

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

如果您正在寻找引导程序 3 的答案，请看这里

于 2013-03-29T04:16:07.623 回答
3

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

于 2015-11-16T05:54:33.690 回答
2

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

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

于 2013-04-27T09:53:31.193 回答
2

看看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;
}
于 2018-08-25T18:41:30.220 回答
1

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

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

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

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

于 2014-05-01T09:45:41.353 回答
1 
.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}
于 2015-01-11T11:18:38.767 回答
1

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

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

&.fade .modal-dialog {
  //   .translate(0, -25%);
于 2015-06-18T03:29:36.877 回答
1

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

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

作为

class="modal bs-example-modal-lg"
于 2020-01-07T14:33:46.843 回答
0

想更新这个。你们中的大多数人还没有完成这个问题。我正在使用 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)*/}
于 2014-02-14T02:47:58.897 回答
0

以下 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; 
}
于 2015-04-23T20:23:50.587 回答