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

Posted 2023-02-22

【中文标题】Twitter Bootstrap modal：如何移除 Slide down 效果

【英文标题】：Twitter Bootstrap modal: How to remove Slide down effect

【发布时间】：2012-04-25 23:19:32

【问题描述】：

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

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

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

【参考方案1】：

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

具体来说，改变：

<div class="modal fade hide">

到：

<div class="modal hide">

---

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

【讨论】：

虽然 OP 确实询问了如何使其淡入，但其中一些答案对于问题的替代形式是正确的。我猜这只是一个糟糕的问题，因为它实际上是 2 个问题合而为一，而且没有人在一个答案中同时回答了这两个问题。

您不必修改引导源。你只需要修改你的html。这是正确的答案。

@umassthrower 是正确的。只回答如何没有过渡。此答案未涵盖如何淡入淡出但不从顶部下拉的问题。

我不明白这是如何正确的答案...它使模态弹出没有淡入淡出，并且 OP 要求删除 SLIDE，但不是 FADE...跨度>

我正在等待保持淡入淡出并移除幻灯片，这个答案没有帮助。奇怪的是，bootstrap 使用他们的 fade 类来处理模态的滑动效果，因为 fade 在他们的 CSS 中是完全独立的。

【参考方案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

【讨论】：

您还应该将其添加到背景中：modal.fade, .modal-backdrop.fade 等...

出于大卫提到的原因，编辑 component-animations.less 文件可能更好。

淡入淡出类是可选的，下面的 Rose 有一个更好的（并且是每个 BS 文档的首选）答案

@umassthrower 这个答案已经很老了，在写这篇文章的时候这个选择还不存在。

我不确定该评论是否正确，因为 BS 2.0 在该答案前 3 个月发布，并且我在去年夏天使用 v2.0 时从我的模态中删除了淡入淡出。也许他们在那之后才更改文档。不知道。

【参考方案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 类。

【讨论】：

对话框关闭时，top: 50% 似乎造成了麻烦。对话框似乎和以前一样在同一个地方打开；但就在关闭之前，它会在一瞬间移动到中心然后关闭。至少在 Chrome 中。有没有其他人也注意到这一点？

@lorem monkey - 干杯，想要淡入淡出而不是幻灯片。如果有人想要 scss/compass 版本... .modal.fade @include transition(opacity .2s linear, none);

@mohitp 我使用的是“top: 25%”而不是“top: 50%”。我还添加了 .modal.fade.in top: 25%;似乎为我做了诀窍。不确定为什么会这样，因为我的模式中没有“in”类。

@dkrape in 类由 Bootstrap.js 添加

这是正确的答案，回答了问题的两个部分。

【参考方案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%。

【讨论】：

我会在自定义样式表中覆盖这些样式，而不是编辑 Bootstrap 的样式表/Less。

这是唯一一个简单的 CSS 解决方案来获得 FADE w/o slide。谢谢。

【参考方案5】：

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

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

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

【讨论】：

谢谢。我最终使用了 10% 而不是 50%，并减少了从 0.3 秒到 0.25 秒的过渡，这对我来说似乎更平滑了。

多次打开和关闭模式会随着时间的推移将其向上移动。

【参考方案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;

【讨论】：

这是 Bootstrap 3 的最佳答案，以保持淡入淡出但移除下滑

这个解决方案也适用于 Bootstrap 4。谢谢！

【参考方案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

【讨论】：

上面的前两个非 LESS 示例忽略了“.modal.fade.in”声明，这使得模态在关闭时跳跃了一下。这个效果很好。这是在实践中：jsfiddle.net/dkrape/4EwFq

这很有效，但我看到一条亮蓝色的水平线出现（在所有 Safari、Firefox 和 Chrome 中）出现在我的 Modal 上方约 32 像素处。

【参考方案8】：

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

【参考方案9】：

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

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

【参考方案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;

【参考方案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。

【参考方案12】：

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

【讨论】：

这将删除动画的显示和隐藏。 Angular-Bootstrap ui 也适用于我。

【参考方案13】：

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

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

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

【参考方案14】：

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

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

作为

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

【参考方案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)*/

【参考方案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;