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

Twitter Bootstrap modal: How to remove Slide down effect

提问by ramz15

Is there a way to change the Twitter Bootstrap Modal window animation from a slide down effect to a fadeIn or just display without the Slide? I read through the documentation here:

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

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

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

But they don't mention any options for changing the modal body slide effects.

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

回答by Rose Perrone

Just take out the fadeclass from the modal div.

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

Specifically, change:

具体来说，改变：

<div class="modal fade hide">

to:

到：

<div class="modal hide">

---

---

UPDATE:For bootstrap3, the hideclass is not needed.

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

回答by Andres Ilich

The modals used by the bootstrap use CSS3 to supply the effects and they can be removed by eliminating the appropriate classes from modals container div:

引导程序使用的模态使用 CSS3 来提供效果，可以通过从模态容器 div 中删除适当的类来删除它们：

<div class="modal hide fade in" id="myModal">
   ....
</div>

As you can see this modal has a class of .fade, meaning it is set to fade in and.in, meaning it will slide in. So just remove the class related to the effect you wish to remove, which in your case is just the .inclass.

正如你所看到的，这个模态有一个类.fade，这意味着它被设置为淡入和.in，意味着它会滑入。所以只需删除与你想要删除的效果相关的类，在你的情况下就是.in类。

Edit: Just ran some tests and it appears that that is not the case, the .inclass is added by javascript, though you can modify he slideDown behavior with css like so:

编辑：刚刚运行了一些测试，似乎情况并非如此，.in该类是由 javascript 添加的，尽管您可以使用 css 修改他的 slideDown 行为，如下所示：

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

Demo

演示

回答by lorem monkey

If you like to have the modal fade in rather than slide in (why is it called .fadeanyway?) you can overwrite the class in your CSS file or directly in bootstrap.csswith this:

如果您希望模式淡入而不是滑入（为什么要调用它.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%;
}

If you don't want any effect just remove the fadeclass from the modal classes.

如果您不想要任何效果，只需fade从模态类中删除该类。

回答by viggity

I believe that most of these answers are for bootstrap 2. I ran into the same issue for bootstrap 3 and wanted to share my fix. Like my previous answer for bootstrap 2, this will still do an opacity fade, but will NOTdo the slide transition.

我相信这些答案中的大部分都是针对 bootstrap 2 的。我在 bootstrap 3 中遇到了同样的问题，想分享我的修复程序。就像我之前对 bootstrap 2 的回答一样，这仍然会进行不透明度淡入淡出，但不会进行幻灯片过渡。

You can either change the modals.less or the theme.css files, depending on your workflow. If you haven't spent any quality time with less, I'd highly recommend it.

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

for less, find the following code in MODALS.less

为更少，找到以下代码 MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

then change the -25%to 0%

然后更改-25%为0%

Alternatively, if you're using just the css, find the following in theme.css:

或者，如果您只使用 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;
}

and then change the -25%to 0%.

然后将 更改-25%为0%。

回答by Alex Bain

I solved this by overriding the default .modal.fadestyles in my own LESS stylesheet:

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

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

This keeps the fade in / fade out animation but removes the slide up / slide down animation.

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

回答by justinazz

I have found the best solution that removes the slide but leaves the fadeis by adding the following css in a css file of your chosing which is invoked after the bootstrap.css

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

回答by viggity

I didn't like the slide effect either. To fix this all you have to do is make the the topattribute the same for both .modal.fade and modal.fade.in. You can take off the top 0.3s ease-outin the transitions too, but it doesn't hurt to leave it in. I like this approach because the fade in/out works, it just kills the slide.

我也不喜欢幻灯片效果。要解决这个问题，您要做的就是使top.modal.fade 和 modal.fade.in的属性相同。你也可以去掉top 0.3s ease-outin 过渡，但把它留在里面也没什么坏处。我喜欢这种方法，因为淡入/淡出有效，它只会杀死幻灯片。

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

If you're looking for a bootstrap 3 answer, look here

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

回答by Amr Morsy

you can also overwrite bootstrap.css by simply removing "top:-25%;"

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

once removed, the modal will simply fade in and out without the slide animation.

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

回答by Kapil Kumar

Just remove the fade class and if you want more animations to be perform on the Modal just use animate.css classes in your Modal.

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

回答by Konstantin XFlash Stratigenas

look at http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/

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