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

I need to disable scrolling in browser while modal dialog is open. So I added

当模态对话框打开时,我需要在浏览器中禁用滚动。所以我补充道

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

in my function and I works but my modal dialog has big dimensions

在我的功能和我的工作,但我的模态对话框有很大的尺寸

width: 1260px; height: 695px;

so on small screens part of it is hidden so I need to add some minimun width and height to make modal dialog visible as a whole.

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

I tried to use :

我试着用:

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

$(“body”)。css({'width':'1300px','height':'1000px','overflow':'hidden'});

But it doesn't work and part of modal dialog is hidden as well. Is there any solution to make it work?

但它不起作用,模态对话框的一部分也被隐藏了。是否有任何解决方案使其工作?

2 个解决方案

#1

Try jquery + css solution as below:

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

CSS

body.modal-open {
    overflow: hidden;
}

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

Or Just

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

#2

This should work
$("body").css({'overflow-x': 'hidden', 'overflow-y': 'auto'});
Also make sure that you add large z-index value to the modal.

这应该是$(“body”)。css({'overflow-x':'hidden','overflow-y':'auto'});还要确保向模态添加大的z-index值。

#1