在 Bootstrap 中使用模态框时如何防止主体滚动？

在模态显示期间防止正文滚动

使用 Twitter 的 Bootstrap 框架中的 Modal 时，您可能会遇到以下问题：当模式对话框已打开。这可能会让用户感到沮丧。

解决方案

当显示模态框时，Bootstrap 会自动向正文添加一个类“modal-open”。您可以通过在样式表中添加 CSS 规则来利用此功能：

<code class="css">body.modal-open {
    overflow: hidden;
}</code>

这将防止模式打开时正文滚动。

引导程序版本注意事项

请注意，此解决方案根据您的 Bootstrap 版本存在限制。

• Bootstrap 2.3.0 及更高版本： Twitter Bootstrap 删除了“modal-open”在此版本中，来自正文的类。

  • 解决方法：您可以在模式打开时手动添加该类，并在模式关闭时将其删除。这可以使用 jQuery 来实现，如下所示：

  <code class="js">$("#myModal").on("show", function () {
      $("body").addClass("modal-open");
  }).on("hidden", function () {
      $("body").removeClass("modal-open")
  });</code>

  登录后复制
• Bootstrap 3.0: “modal-open”类预计在 3.0 版本中显式返回

IE 兼容性

请注意，正如您所提到的，该解决方案与 IE7 兼容。

以上是在 Bootstrap 中使用模态框时如何防止主体滚动？的详细内容。更多信息请关注PHP中文网其他相关文章！