允許滾動的簡單的全屏幕透明div

Question

我正在製作一個彈出框，在單擊鏈接時出現。我希望背景被遮住，並使用透明的全屏div來實現此目的。我也希望盒子能夠水平和垂直居中，無論用戶在頁面上的哪個位置。

當我這樣做時，黑色覆蓋不會延伸到頁面的底部。 如果向下滾動，頁面的其餘部分正常顯示。我也無法讓彈出窗口正確居中。

Here's a jsFiddle demonstrating.

這裏是我的代碼：

HTML：

<div id="overlay"> 
    <!--- Make a really long page for demo ---> 
    <br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /> 
    <br /><br /><br /><br /><br /><br /> 
</div> 

<div id="popup">Here is some text</div> 

CSS：

#overlay 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 111; 
    background-color: #000; 
    opacity: 0.5; 
    width: 100%; 
    height: 100%; 
} 

#popup 
{ 
    left: 30%; 
    top: 40%; 
    background-color: #FFF; 
    z-index: 222; 
    width: 300px; 
    height: 200px; 
    position: absolute; 
} 

Answer 1

你將需要在absolute定位更改爲fixed定位，就像這樣：

position: fixed; 

DEMO