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');
})

Answer 2

这应该有用
$("body").css({'overflow-x': 'hidden', 'overflow-y': 'auto'});
另外，请确保向模态添加大z-index值。

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

2 个答案: