Twitter Bootstrap模态：如何消除滑倒效应

有没有一种方法可以将Twitter Bootstrap Modal窗口动画从下滑效果更改为fadeIn或仅在不显示幻灯片的情况下显示？我在这里阅读了文档：

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

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

只需fade从模式div中删除该类。

具体来说，更改：

<div class="modal fade hide">

至：

<div class="modal hide">

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

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

演示版

如果您希望模式淡入而不是滑入（为什么.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从模态类中删除该类。

我相信这些答案大多数都是针对引导程序2的。我遇到了针对引导程序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%。

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

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

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

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

我也不喜欢滑动效果。要解决此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的答案，请看这里

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

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

只需删除衰落类，如果您想在Modal上执行更多的动画，只需在Modal中使用animate.css类即可。

我正在使用bootstrap 3和Durandal JS 2模态插件。这个问题是Google搜索结果的重中之重，并且由于上述答案都无法解决我的问题，因此我想与其他访问者分享我的解决方案。

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

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

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

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

问题很明确：仅删除幻灯片：以下是如何在Bootstrap v3中进行更改

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

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

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

想要更新此。你们大多数人还没有完成此问题。我正在使用Bootstrap3。以上修复程序均无效。

删除幻灯片效果，但保持淡入效果。我进入了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)*/}

以下CSS对我有用-使用Bootstrap3。您需要在boostrap样式之后添加此CSS-

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

只需从模态类中删除“ fade”类

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

如

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

本文地址：http://javascript.askforanswer.com/twitter-bootstrapmotairuhexiaochuhuadaoxiaoying.html
文章标签：javascript , jquery , jquery-ui , twitter-bootstrap
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载