javascript 如果弹出窗口打开，则防止页面滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15337594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent scroll of the page if pop-up is open
提问by Pramod Setlur
I am using the jquery mobile pop up. This is inside the page. There is an image that opens this pop-up. Now how do I prevent the entire page from scrolling only if the pop-up is open and allow scrolling if the pop up is closed?
我正在使用 jquery 移动弹出窗口。这是页面内部。有一张图片可以打开此弹出窗口。现在如何防止整个页面仅在弹出窗口打开时滚动，并在弹出窗口关闭时允许滚动？
<a href="#settingsPopUp" data-rel="popup" data-position-to="window" data-inline="true" data-icon="gear"><img src="settings1.jpg" alt="Settings"></a>
<br>
<div data-role="popup" id="settingsPopUp" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
<h3>Location Details</h3>
</div>
</div>
回答by oriolparra
I have mixed Lefois's solution and Simona Adriani's solution. It works for me in browser and mobile phone WebView (PhoneGap + jquerymobile).
我混合了Lefois的解决方案和Simona Adriani的解决方案。它在浏览器和手机 WebView (PhoneGap + jquerymobile) 中对我有用。
$(document).on('popupafteropen', '[data-role="popup"]', function(event, ui) {
$('body').css('overflow', 'hidden').on('touchmove', function(e) {
e.preventDefault();
});
}).on('popupafterclose', '[data-role="popup"]', function(event, ui) {
$('body').css('overflow', 'auto').off('touchmove');
});
回答by Simona Adriani
For me this method didn't work, it works on browser but not in Phone Gap application. So I resolve it in this way:
对我来说，这种方法不起作用，它适用于浏览器，但不适用于 Phone Gap 应用程序。所以我是这样解决的：
$('#Popup-id').on({
popupbeforeposition: function(){
$('body').on('touchmove', false);
},
popupafterclose: function(){
$('body').off('touchmove');
}
});
Hope it helps!
希望能帮助到你！
回答by Terry
What about assigning overflow-y: hidden;to the element that you don't want to scroll, when the modal box is open? (usually it will be <body>)
overflow-y: hidden;当模态框打开时，分配给您不想滚动的元素怎么样？（通常会是<body>）
回答by Lefois
I can't comment on previous answer, but there is a little mistake. Following piece of code did the trick for me:
我不能评论以前的答案，但有一个小错误。以下代码对我有用：
$( "#mypopup" ).popup({
afteropen: function( e) {
$('body').css('overflow','hidden');
},
afterclose: function(e) {
$('body').css('overflow','auto');
}
});
回答by Jai
There are two ways:
有两种方式：
Either "overflow:hidden" the bodyOr give a "position:fixed" to the popup so this will scroll in the viewport.
Either "overflow:hidden" the bodyOr give a "position:fixed" to the popup so this will scroll in the viewport.
回答by misoukrane
you can use events for the pop up widget
您可以为弹出窗口小部件使用事件
$( "#settingsPopUp" ).popup({
afteropen: function( event, ui ) {
$('body').css({
overflow:'hidden'
});
},
afterclose: function( event, ui ) {
$('body').css({
overflow:'auto'
});
}
});
I think this is a dynamic solution and it will take care of your problem.
我认为这是一个动态解决方案，它将解决您的问题。
