Twitter Bootstrap模式:如何删除向下滑动效果

Question

有没有办法将Twitter Bootstrap Modal窗口动画从滑动效果更改为fadeIn或仅显示没有幻灯片？我在这里阅读了文档:

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

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

Answer 1

只需fade从模态div中取出该类.

具体来说,改变:

<div class="modal fade hide">

至:

<div class="modal hide">

更新:对于bootstrap3,hide不需要该类.

Answer 2

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

演示

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文件,具体取决于您的工作流程.如果你没有用更少的质量时间,我强烈推荐它.

少了,找到以下代码 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

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

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

这样可以保持淡入/淡出动画,但会移除向上/向下滑动动画.

Answer 6

我也不喜欢滑动效果.要解决这个问题,你所要做的就是使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%;
}

如果你正在寻找一个bootstrap 3的答案,请看这里

Answer 7

我找到了删除幻灯片的最佳解决方案,但是通过在bootstrap.css之后调用的chosing的css文件中添加以下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;
}