弹出窗口处于活动状态时禁用滚动 [英] Disable scrolling while popup active

问题描述

我通过遵循在线教程( 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>

解决方案

一个简单的答案(可以使用且无需停止滚动事件)将设置为#ac-wrapper固定. >

例如

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

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

但是滚动页面并打开弹出窗口是错误的！！！ (几乎总是如此)

之所以您不希望允许滚动是因为，如果您的弹出窗口不是全屏或半透明的，则用户将看到内容在弹出窗口后面滚动.除此之外，当他们关闭弹出窗口时，它们现在将在页面上的其他位置.

一种解决方案是，当您在javascript中绑定一个click事件以显示此弹出窗口时，还应使用以下基本规则将一个类添加到正文中:

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

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

如果用户随后在打开弹出窗口的同时滚动，则文档将不会滚动.当用户关闭弹出窗口时，滚动将再次变为可用状态，并且用户可以从上次停止的地方继续:)

I created a jQuery popup by following an online tutorial (http://uposonghar.com/popup.html).

Due to my low knowledge on jQuery I am not able to make it work as of my requirements.

My problem:

1. I want to disable scroll of webpage while popup is active.
2. Background fade color of popup while active is not working on full webpage.

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>

解决方案

A simple answer, which you could use and would not require you to stop the scroll event would be to set the position of your #ac-wrapper fixed.

e.g.

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

this will keep the container of the popup always visible (aligned top - left) but would still allow scrolling.

But scrolling the page with a popup open is BAD!!! (almost always anyway)

Reason you would not want to allow scrolling though is because if your popup isn't fullscreen or is semi transparent, users will see the content scroll behind the popup. In addition to that, when they close the popup they will now be in a different position on the page.

A solution is that, when you bind a click event in javascript to display this popup, to also add a class to the body with essentially these rules:

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

Then, when closing the popup by triggering some action or dismissing it with a click, you simply remove the class again, allowing scroll after the popup has closed.

If the user then scrolls while the popup is open, the document will not scroll. When the user closes the popup, scrolling will become available again and the user can continue where (s)he left off :)

这篇关于弹出窗口处于活动状态时禁用滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！