javascript - Twitter Bootstrap 2.0.4 Modal - 如何将模态淡入效果应用于新创建的模态类样式？

Question

我正在自学网页设计，现在我开始使用 twitter bootstrap 的模态 JavaScript 插件。

我创建了一个名为 modal-login 的新模式类，它是模式窗口内的登录表单。事情一直很好，但是淡入淡出效果/向下滑动不起作用。将模态框从顶部拉到中心的效果。

我对javascript和jQuery还没有深入的了解。

我现在的问题是，我们可以编辑 bootstrap-modal.js 文件，以便我可以包含名为 modal-login 和 modal-register 的新模式类吗？以便它可以利用模态淡入淡出效果？

Answer 1

您不需要编辑bootstrap-modal.js文件。您只需要将fade类添加到模态框，然后添加一些 CSS 规则。

例如：

.modal-login.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
      -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal-login.fade.in {
  top: 50%;
}

modal如果您仍然将普通类保留在新类上，并且只使用新类进行覆盖，那就更好了。这样你就可以继承上面的 CSS，而不必复制它。