彈出背景疊加層不延伸到頁面底部

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;
}

在這里

Answer 1

可能需要設置position:fixed為您的疊加層。

固定位置將（此對象的）原點設置在瀏覽器的左上方，並且相對於滾動保持固定 。 此行為類似於background-attachment：fixed。