jQuery 如何在弹出窗口打开时停止滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19175265/
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
How to stop Scrolling when a popup is open
提问by user2843032
I have a popup div which is present on the center of the screen and when the pop-up is visible the scrolling should be disable. How do I do that using jQuery and css. I already tried using an overlay over the browser. However this is not working.
我有一个弹出 div，它出现在屏幕中央，当弹出窗口可见时，应该禁用滚动。我如何使用 jQuery 和 css 做到这一点。我已经尝试在浏览器上使用叠加层。然而，这是行不通的。
This is my code
这是我的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Jquery popup</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
#popup
{
display: none;
width: 640px;
height: 480px;
overflow: auto;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin-left: -320px;
margin-top: -240px;
border: thin dashed #8f44ad;
padding-bottom: 20px;
background-color: #2d3e50;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 24px;
line-height: 35px;
letter-spacing: 2px;
color: #FFFFFF;
}
.close
{
float: right;
color: #2a80b9;
cursor: pointer;
}
#overlay
{
display: none;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: fixed;
z-index: 1000;
background: #96a6a6;
}
#style {
background-color: #2d3e50;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 18px;
color: #FFF;
}
#main {
width: 600px;
height: 150px;
margin-top: 200px;
margin-left: 250px;
margin-right: auto;
padding: 30px;
border: thin dashed #FFF;
font-size: 25px;
color: #fff;
line-height: 35px;
letter-spacing: 2px;
padding-left: 250px;
}
#main input
{
width: 400px;
height: 50px;
border: 1px solid #FFF;
color: #FFF;
font-size: 20px;
line-height: 35px;
letter-spacing: 2px;
background-color: #16a086;
padding: 0px;
margin-left: 20px;
}
#main input:hover
{
background-color:#27ae61;
}
</style>
</head>
<body id="style">
<div id="popup">
<span class="close">×</span>
<br />
<br />
<div style=" width:600px float:left" align="center ">
Click on the button above to close this box
</div>
</div>
<div id="overlay"></div>
<div id="main">
<div style="width:600px;float:left">
<span>This is the basic view of the page</span>
</div>
<br />
<br />
<div style="width:600px;float:left">
<input type="submit" value="Click Here To view the popup" id="showpopup" />
</div>
</div>
<script type="text/ecmascript">
$(document).ready(function(){
$("input#showpopup").click(function(){
$("div#overlay").fadeIn('500');
$("div#popup").delay('800');
$("div#popup").fadeIn('500');
});
$(document).on('click', '.close', function(){
$("div#popup").fadeOut('500');
$("div#overlay").delay('500');
$("div#overlay").fadeOut('500');
});
});
</script>
</body>
</html>
回答by Praveen
When you open the popup, change the css overflowproperty to hiddenlike
当您打开弹出窗口时，将 cssoverflow属性更改为hiddenlike
$('body').css('overflow','hidden')
When you close it, change back to normal
关闭后恢复正常
$('body').css('overflow','auto')
Complete Code:
完整代码：
$(document).ready(function () {
$("input#showpopup").click(function () {
$("div#overlay").fadeIn('500');
$("div#popup").delay('800');
$("div#popup").fadeIn('500');
$('body').css('overflow', 'hidden'); //ADD THIS
});
$(document).on('click', '.close', function () {
$("div#popup").fadeOut('500');
$("div#overlay").delay('500');
$("div#overlay").fadeOut('500');
$('body').css('overflow', 'auto'); //ADD THIS
});
});
fiddle
小提琴
回答by Abhinav Pandey
If I understand correctly, you want to disable full page scrolling, i.e the body.
如果我理解正确，您想禁用整页滚动，即正文。
Set overflow:hiddenCSS attribute for <body>tag, when the popup is enabled and set it as autowhen popup is disabled.
设置标签的overflow:hiddenCSS 属性<body>，当弹出窗口被启用时，将其设置为auto当弹出窗口被禁用时。
回答by Ash
Add overflow:hidden to the css of the body:
将 overflow:hidden 添加到 body 的 css 中：
$('#show_my_popup').click(function(){
$('body').css('overflow', 'hidden');
});
then remove the overflow when it closes:
然后在关闭时删除溢出：
...
$('body').css('overflow', '');
This will make the page jump a few pixels to the right if you have a scrollbar though, so you can add this to avoid it:
如果您有滚动条，这将使页面向右跳几个像素，因此您可以添加它来避免它：
$('#show_my_popup').click(function(){
//add right margin to keep page from jumping right
$('body').css('margin-right', (window.innerWidth - $('body').width()) + 'px');
$('body').css('overflow', 'hidden');
});
then when you close the popup:
然后当你关闭弹出窗口时：
...
$('body').css('overflow', '');
$('body').css('margin-right', '');
回答by Srinivasan Thirupathi
Can archive by jQuery. Overflow won't work on IOS. Below are the code to enable and disable background scroll.
可以通过 jQuery 存档。溢出在 IOS 上不起作用。下面是启用和禁用背景滚动的代码。
Disable Body touchmove.
$(document).bind('touchmove', function(e){ e.preventDefault(); // alert('prevent scroll'); });Enable Popup container scroll.
$('.mfp-auto-cursor .mfp-content').bind('touchmove', function(e){ e.stopPropagation(); // alert('allow scroll'); });After close the popup enable body scroll again.
$(document).unbind();
禁用身体触摸移动。
$(document).bind('touchmove', function(e){ e.preventDefault(); // alert('prevent scroll'); });启用弹出容器滚动。
$('.mfp-auto-cursor .mfp-content').bind('touchmove', function(e){ e.stopPropagation(); // alert('allow scroll'); });关闭弹出窗口后再次启用身体滚动。
$(document).unbind();
回答by Jason Is My Name
Is this a situation where you could apply position fixed to the container of your pop up, along with a higher z-index than the rest of your content. Allowing the scroll to remain but your pop-up will sit over the top of the page?
在这种情况下，您可以将位置固定到弹出窗口的容器中，以及比其他内容更高的 z-index。允许滚动保留但您的弹出窗口将位于页面顶部？
.container {
position: fixed;
z-index: 10;
}
Ta, J.
塔，J。
回答by Pankaj Sharma
use overflow:hiddenon body element when dialog opens.
overflow:hidden当对话框打开时在 body 元素上使用。
