弹出窗口处于活动状态时禁用滚动

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

要禁用滚动条:

$('body').css('overflow', 'hidden');

这将隐藏滚动条

背景淡出的事情:

我创建了自己的popup-dialog-widget,它也有一个背景.我使用了以下CSS:

div.modal{
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #000;
    display: none;
    filter: alpha(opacity=25); /* internet explorer */
    -khtml-opacity: 0.25; /* khtml, old safari */
    -moz-opacity: 0.25; /* mozilla, netscape */
    opacity: 0.25; /* fx, safari, opera */
}

Answer 2

一个简单的答案,你可以使用,不需要你停止滚动事件将是设置你#ac-wrapper固定的位置.

例如

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

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

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

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

一个解决方案是,当你click在javascript中绑定一个事件来显示这个弹出窗口时,还要向一个类添加一个类,基本上是这些规则:

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

然后,当通过触发某个动作或通过单击解除它来关闭弹出窗口时,您只需再次删除该类,允许在弹出窗口关闭后滚动.

如果用户在弹出窗口打开时滚动,则文档将不会滚动.当用户关闭弹出窗口时,滚动将再次可用,用户可以继续停止的位置:)

Answer 3

我有一个类似的问题；想要在显示“弹出”div 时禁用垂直滚动。

更改溢出属性body确实有效，但也会弄乱文档的宽度。

我选择 jquery 来解决这个问题，并为滚动条使用了占位符。这是在没有绑定到scroll事件的情况下完成的，因此这不会改变您的滚动条位置或导致闪烁:)

HTML：

<div id="scrollPlaceHolder"></div>

CSS：

body,html
{
    height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
    height:100%;
    width:0px;
    float:right;
    display: inline;
    top:0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

查询：

function DisableScrollbar()
{
    // exit if page can't scroll
    if($(document).height() ==  $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;

    // ID's \ class to change
    var items_to_change = "#Banner, #Footer, #Content";

    $('body').css('overflow-y','hidden');

    // get new width
    new_width = $(document).width()

    // update width of items to their old one(one with the scrollbar visible)
    $(items_to_change).width(old_width);

    // make the placeholder the same width the scrollbar was
    $("#ScrollbarPlaceholder").show().width(new_width-old_width);

    // and float the items to the other side.
    $(items_to_change).css("float", "left");

}

function EnableScrollbar()
{
    // exit if page can't scroll
    if ($(document).height() ==  $('body').height()) return;   

    // remove the placeholder, then bring back the scrollbar
    $("#ScrollbarPlaceholder").fadeOut(function(){          
        $('body').css('overflow-y','auto');
    });
}

希望这可以帮助。