jquery - 在模态对话框打开时禁用浏览器滚动

Question

我需要在模式对话框打开时禁用浏览器中的滚动。所以我加了

$("body").css({'overflow': 'hidden' });  

在我的函数中，我可以工作，但我的模态对话框有很大的尺寸

width: 1260px; height: 695px;

所以在小屏幕上它的一部分是隐藏的所以我需要添加一些最小宽度和高度以使模式对话框作为一个整体可见。

我尝试使用:

$("body").css({'width': '1300px', 'height': '1000px', 'overflow': 'hidden' });

但它不起作用，部分模态对话框也被隐藏了。有什么解决方案可以让它发挥作用吗？

Answer 1

尝试使用 jquery + css 解决方案如下:

CSS

body.modal-open {
    overflow: hidden;
}

JS

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

或者只是

$('#myModal').modal().on('show', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})