Question

大家早上好

我创建了一个具有0.9不透明度的白色叠加层的弹出窗口。问题是当用户在弹出窗口打开时滚动浏览器时，叠加层停在屏幕底部，它不会延伸到正文的底部。

这就是我所拥有的：

<div id="popup">
    <div class="popupdiv">
        <a class="popup" href="URL" target="_blank"></a>
        <a class="close" href="#"></a>
    </div>
</div>

<script>
    jQuery( ".close" ).click(function() {
        jQuery( "#popup" ).hide();
    });
</script>

和我的CSS：

#popup {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    z-index: 500;
}

.popupdiv {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 833px;
    margin-top: -200px;
    margin-left: -416px;
    background: url(imageurl);
    z-index: 510;
}

.popup {
    display: block; 
    height: 400px;
    width: 833px;
}

.popupdiv .close {
    display: block;
    height: 18px; 
    width: 18px;
    position: relative; 
    top: -380px; 
    left: 800px; 
    background-image: url(imageurl); 
    z-index: 550;
}

FIDDLE HERE

Answer 1

您可能需要为叠加层设置position:fixed。

固定位置将（此对象的）原点设置到浏览器的左上角，并保持固定相对于滚动。此行为类似于background-attachment：fixed。

弹出背景覆盖不会延伸到页面底部

1 个答案: