Question

我一直在尝试许多解决方案，但似乎无法完成这项工作。

我已经找到了一种解决方案，该解决方案可防止模式打开时阻止身体滚动：

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

这很好。问题是，当我打开模态时，主体会滚动到顶部。我不希望这种行为，并且我知道这与position：fixed有关。我尝试过亲戚，但没有用。

谢谢。

Answer 1

如果我对您的理解很好，则可以使用Bootstrap执行以下操作：

// Avoid scrolling
body.modal-open, .modal-open .modal {
  overflow: hidden;
}

然后将.modal-dialog-centered添加到.modal-dialog以使模态垂直居中。

https://jsfiddle.net/4938ek6q/

请在上面链接的示例中调整结果窗口的大小，以检查是否正是您要找的内容。

希望获得帮助，或者至少将您指向正确的方向：）

Answer 2

I ended up figuring it out. What I did was removing the css I posted on the question, and then the following jquery adding a class to the html element, and in css styling that class:

JQUERY:

$(".modal").on('show.bs.modal', function(event) {

    $('html').addClass('no-scroll');

})
$(".modal").on('hide.bs.modal', function(event) {

    $('html').removeClass('no-scroll');

})

CSS:

.no-scroll{
    overflow: hidden;
}

阻止主体在模式打开并滚动到顶部时滚动

2 个答案: