当打开模态并包含CSS3时，防止BODY滚动

Question

我知道这是一个经常被问到的问题，但如果包含CSS3，那么添加body.modal-open {overflow:hidden;}来解决此post中提到的问题的解决方案将无法正常工作。

• 例如，请参阅此bootply，可以滚动正文。
• 不包括CSS3的相同示例 - ＆gt; bootply。标准解决方案非常有效。

当打开模态并包含CSS3时，如何防止Body滚动？

Answer 1

当模态打开时，将类noscroll添加到正文中，可以解决问题。

JS：

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

CSS：

.noscroll { overflow: hidden; }

见bootply。

Answer 2

您可以使用

'90'

在模态的开放回调中，并将其恢复为onClose