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，而无需复制它。