javascript - 打开模式时防止 BODY 滚动

Question

当我网站上的 Modal(来自 http://twitter.github.com/bootstrap)打开时，我希望我的 body 在使用鼠标滚轮时停止滚动。

当模态打开但没有成功时，我尝试调用下面的一段 javascript

$(window).scroll(function() { return false; });

与

$(window).live('scroll', function() { return false; });

请注意我们的网站不再支持 IE6，但 IE7+ 需要兼容。

Answer 1

Bootstrap 的 modal 会在显示模态对话框时自动将类 modal-open 添加到正文中，并在隐藏对话框时将其删除。因此，您可以在 CSS 中添加以下内容:

body.modal-open {
    overflow: hidden;
}

您可能会争辩说上面的代码属于 Bootstrap CSS 代码库，但这是将其添加到您的网站的简单修复。

2013 年 2 月 8 日更新
现在，这在 Twitter Bootstrap v. 2.3.0 中已停止工作——它们不再将 modal-open 类添加到正文中。

一种解决方法是在模态即将显示时将类添加到正文中，并在模态关闭时将其删除:

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

2013 年 3 月 11 日更新看起来 modal-open 类将在 Bootstrap 3.0 中返回，明确用于防止滚动:

Reintroduces .modal-open on the body (so we can nuke the scroll there)

见:https://github.com/twitter/bootstrap/pull/6342 - 查看模态部分。