我正在使用Jquery对话框在页面顶部打开一个弹出窗口。
当我打开对话框时，我想要禁用一般页面滚动。
为了做到这一点，我在做：
当我打开对话框时，我想要禁用一般页面滚动。
为了做到这一点，我在做：
$('body').css({overflow:'hidden'});
当对话框打开时，和：
$('body').css({overflow:'auto'});
当对话框关闭时。
这是有效的，但是当滚动条被删除时，后面的内容向右移动，结果不太好。
我尝试了另一种方法，通过创建一个css类“noscroll”，如下所示：
body.noscroll
{
position: fixed;
overflow-y: scroll;
width: 100%;
}
那么，而不是以前的js代码，我正在添加和删除这个类到对话框打开/关闭的身体。
现在这对滚动条有效，后面的内容不会向右移动，但是使用这种方法，后面的内容可以回到顶端。
解决方法
我已经做了一个非常简单的我的解决方案的例子。
你的弹出窗口应该在一个框中
<div id="shadow">
<div id="popup">
<a id='close' href="#">Close</a>
</div>
然后把这些CSS放在根div上
#shadow{
display: none;
position: fixed;
top:0;
bottom: 0;
width: 100%;
height:100%;
background-color: rgba(0,0.6);
}
固定位置是非常重要的，因为你不想看到白色的边框，它将采取完整的窗口宽度而不是身体。
那么有一点小诀窍
$('#open').click(function(e){
e.preventDefault()
$('body').width($('body').width());
$('body').css('overflow','hidden');
$('#shadow').css('display','block');
})
$('#close').click(function(e){
e.preventDefault()
$('body,#shadow').removeAttr('style')
})
这里的目标是在取出滚动条之前取下身体宽度。您的内容将不会移动。
希望它有帮助！
对不起我的英语，不是我的本地语言。
