在Bootstrap中阻止后台页面滚动

Question

我在我的网站上使用Bootstrap 4。该网页包含由文本和图像组成的文章。

​

​

当你点击图片时，一个放大的图片就会以这样的模式弹出。

​

​

但问题出在以模式打开时，页面会滚动到页面顶部。有什么方法可以防止我的页面在模式打开时自动滚动。

Answer 1

你可以这样做，当你触发打开你的图片的事件时应用CSS，即只需将Overflow:hidden应用于你的body，如下所示

尝尝这个

脚本

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

CSS

body.modal-open {
    overflow: hidden;
}

在Prevent BODY from scrolling上参考相同的问题，可以更好地解释上面的问题

Answer 2

请检查您的bootsrap4模式在css中的位置。在bootsrap4 modal documentation中解释清楚的Bootsrap4

此外，您还可以参考这个简单的示例来了解images modal popup的行为