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

演示

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

具体来说，改变:

<div class="modal fade hide">

致:

<div class="modal hide">

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

如果你喜欢有模态淡入而不是幻灯片(为什么它被称为 .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类。

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

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

这保持淡入/淡出动画，但删除幻灯片向上/向下动画。

我也不喜欢幻灯片效果。要解决这个问题，您所要做的就是使两者的 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答案，看这里

你也可以通过删除“ top:-25%”来覆盖 bootstrap.css;

一旦删除，模态将只是淡入和淡出没有幻灯片动画。

我相信这些答案中的大部分都是针对引导程序2的。我在引导程序3中遇到了同样的问题，并希望分享我的修复。像我以前的答案引导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%。

想更新一下这个。你们大多数人还没有完成这个问题。我用的是引导程序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)*/}

我正在使用 bootstrap 3和 Durandal JS 2模态插件。这个问题是在谷歌搜索结果之上的，因为以上的答案对我都不起作用，我想我应该把我的解决方案分享给未来的访问者。

我在我自己的 Less 中覆盖了默认 Bootstrap 的 Less 代码:

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

这样我只剩下淡出效果，没有下滑。

我发现 移除幻灯片，但留下褪色的最佳解决方案是在您选择的 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;
}

.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%);

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

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

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

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

作为

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