javascript - 在弹出窗口处于事件状态时禁用滚动

Question

我按照在线教程 (http://uposonghar.com/popup.html) 创建了一个 jQuery 弹出窗口。

由于我对 jQuery 的了解不多，我无法让它按照我的要求工作。

我的问题:

1. 我想在弹出窗口处于事件状态时禁用网页滚动。
2. 弹出窗口的背景渐变颜色在整个网页上不起作用。

CSS:

body {
    background: #999;
}
#ac-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}
#popup{
    width: 555px;
    height: 375px;
    background: #FFFFFF;
    border: 5px solid #000;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: #64686e 0px 0px 3px 3px;
    -moz-box-shadow: #64686e 0px 0px 3px 3px;
    -webkit-box-shadow: #64686e 0px 0px 3px 3px;
    position: relative;
    top: 150px; left: 375px;
}

JavaScript:

<script type="text/javascript">
function PopUp(){
    document.getElementById('ac-wrapper').style.display="none";
}
</script>

HTML:

<div id="ac-wrapper">
  <div id="popup">
  <center>
    <p>Popup Content Here</p>
    <input type="submit" name="submit" value="Submit" onClick="PopUp()" />
  </center>
  </div>
</div>

<p>Page Content Here</p>

Answer 1

一个您可以使用并且不需要停止滚动事件的简单答案是将您的 #ac-wrapper 的位置固定。

例如

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}

这将使弹出窗口的容器始终可见(左上对齐)，但仍允许滚动。

但是在打开弹出窗口的情况下滚动页面是很糟糕的!!! (无论如何几乎总是)

您不想允许滚动的原因是，如果您的弹出窗口不是全屏或半透明的，用户将看到内容在弹出窗口后面滚动。除此之外，当他们关闭弹出窗口时，他们现在将位于页面上的不同位置。

一个解决方案是，当您在 javascript 中绑定(bind)一个 click 事件以显示此弹出窗口时，还要使用以下基本规则向主体添加一个类:

.my-body-noscroll-class {
    overflow: hidden;
}

然后，当通过触发某些操作或单击关闭弹出窗口来关闭弹出窗口时，您只需再次删除该类，允许在弹出窗口关闭后滚动。

如果用户随后在弹出窗口打开时滚动，文档将不会滚动。当用户关闭弹出窗口时，滚动将再次可用，用户可以从他们离开的地方继续:)