Jquery 如何在弹出窗口打开时停止滚动_Jquery_Html_Css

Jquery 如何在弹出窗口打开时停止滚动

jquery html css

Jquery 如何在弹出窗口打开时停止滚动,jquery,html,css,Jquery,Html,Css,我有一个弹出div，它出现在屏幕中央，当弹出窗口可见时，滚动应该被禁用。如何使用jQuery和css实现这一点。我已经尝试在浏览器上使用覆盖。然而，这是行不通的这是我的密码 <!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.o

我有一个弹出div，它出现在屏幕中央，当弹出窗口可见时，滚动应该被禁用。如何使用jQuery和css实现这一点。我已经尝试在浏览器上使用覆盖。然而，这是行不通的

这是我的密码

<!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">&times;</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>


简单Jquery弹出窗口
#弹出窗口
{
显示：无；
宽度：640px；
高度：480px；
溢出：自动；
位置：绝对位置；
z指数：2000；
最高：50%；
左：50%；
左边距：-320px；
边缘顶部：-240px；
边框：细虚线#8f44ad；
垫底：20px；
背景色：#2d3e50；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
字体大小：24px；
线高：35px；
字母间距：2px；
颜色：#FFFFFF；
}
.结束
{
浮动：对；
颜色：#2a80b9；
光标：指针；
}
#覆盖层
{
显示：无；
宽度：100%；
身高：100%；
左：0；
排名：0；
位置：固定；
z指数：1000；
背景：96A6；
}
#风格{
背景色：#2d3e50；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
字号：18px；
线高：18px；
颜色：#FFF；
}
#主要{
宽度：600px；
高度：150像素；
利润上限：200px；
左边距：250像素；
右边距：自动；
填充：30px；
边框：细虚线#FFF；
字体大小：25px；
颜色：#fff；
线高：35px；
字母间距：2px；
左侧填充：250px；
}
#主要输入
{
宽度：400px；
高度：50px；
边框：1px实心#FFF；
颜色：#FFF；
字体大小：20px；
线高：35px；
字母间距：2px；
背景色：#16a086；
填充：0px；
左边距：20px；
}
#主要输入：悬停
{
背景色：#27ae61；
}
&时代；




单击上面的按钮关闭此框
这是页面的基本视图




$（文档）.ready（函数（）{
$（“输入#显示弹出窗口”）。单击（函数（）{
$（“div#overlay”）.fadeIn（'500'）；
$（“div#popup”）.delay（'800'）；
$（“div#popup”）.fadeIn（'500'）；
}); 
$（文档）.on（'click'，'.close'，函数（）{
$（“div#popup”）.fadeOut（'500'）；
$（“div#overlay”）。延迟（'500'）；
$（“div#overlay”）.fadeOut（'500'）；
});
});

如果我理解正确，您希望禁用整页滚动，即正文

启用弹出窗口时，为

标记设置

溢出：隐藏CSS属性，禁用弹出窗口时，将其设置为自动。
打开弹出窗口时，将CSS溢出属性更改为隐藏类似
$('body').css('overflow','hidden')

当您关闭它时，将其切换回正常状态
$('body').css('overflow','auto')

完整代码：
 $(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
     });
 });

当对话框打开时，在body元素上使用overflow:hidden
。
将overflow:hidden添加到body的css中：
$('#show_my_popup').click(function(){
    $('body').css('overflow', 'hidden');
});

然后在溢流阀关闭时移除溢流阀：
...
$('body').css('overflow', '');

如果您有滚动条，这将使页面向右跳转几个像素，因此您可以添加此选项以避免：
$('#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');
});

然后，当您关闭弹出窗口时：
...
$('body').css('overflow', '');
$('body').css('margin-right', '');

可以通过jQuery进行归档。溢出在IOS上不起作用。下面是启用和禁用后台滚动的代码
禁用身体触摸移动
$(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();


在这种情况下，您可以将位置固定应用于弹出窗口的容器，同时使用比其他内容更高的z索引。是否允许滚动条保留，但您的弹出窗口将位于页面顶部
.container {
    position: fixed;
    z-index: 10;
}

Ta，J.
在设置溢出：隐藏时，是否有办法防止页面大小调整？使用最大宽度
/最小宽度
和类似的高度设置？