彈出不覆蓋整個頁面的背景顏色

我創建了一個彈出窗口及其背景顏色，使頁面變暗不會顯示在整個頁面上。它只顯示在頁面的前100％。如果向下滾動，頁面將回到正常的div背景色。彈出不覆蓋整個頁面的背景顏色

我創建了一個小提琴來幫助說明我的意思。向下滾動並單擊藍色文本。這將使彈出窗口出現。然後，如果向上滾動，則會看到灰色背景色僅顯示在第一個100％視口中，但當您向下滾動時會回到白色。我希望整個頁面在點擊時變成灰色。

我的小提琴

我已經設置高度爲100％，所以我不知道這是爲什麼不將整個頁面上的任何影響。

.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: #FFFFFF; 
    z-index:1001; 
    -moz-opacity: 0.3; 
    opacity:.30; 
    filter: alpha(opacity=30); 
}

來源

2015-09-25 Ralph

'HTML，身體{高度：100％; }' – somethinghere

對不起。我已經在我的文件中。但我忘了將其添加到它。 – Ralph

另外，由於絕對位置將它定位在文檔的0,0處，因此您的位置比'fixed'更好，而100％高度表示它具有_viewport_的高度。添加'position：fixed'並且它應該可以工作。 – somethinghere

更改位置fixed您的疊加，爲absolute將在您文件同時的0, 0它定位height: 100%給它100％的高度視口。位置fixed將其修復到您的視口的位置0,0。

這裏是您顯示位置absolute（紅色）和位置fixed（藍色）之間的差異的例子：

#push { 
 
    height: 5000px; 
 
} 
 
#absolute, #fixed { 
 
    background: rgba(255,0,0,.5); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
#fixed { 
 
    position: fixed; 
 
    background: rgba(0,0,255,.5); 
 
}

<div id="push"></div> 
 
<div id="absolute"></div> 
 
<div id="fixed"></div>

來源

2015-09-25 15:51:03 somethinghere

這工作在我的小提琴，但不是我的實際頁面。 – Ralph

我只能修理你的小提琴，而不是你的實際頁面 - 必須有別的東西，但我不知道是什麼原因，因爲位置固定的元素（和兩個定位值集合）總是固定在視口上，你可以請參閱片段。 – somethinghere

沒關係，它的工作原理。我試圖改變我的媒體查詢'black_overlay'。謝謝你的偉大答案。 – Ralph

檢查了這一點 - https://jsfiddle.net/3x42sdd8/2/

剛剛更新位置

.black_overlay{position:fixed;}

來源

2015-09-25 15:50:01 Ranjana

嗨，歡迎來到堆棧溢出 - 您可以擴展一下_why_這是事實，否則您的答案對於稍後閱讀這些內容並且沒有具體實現的人來說不是很有幫助。 – somethinghere

彈出不覆蓋整個頁面的背景顏色

回答

相關問題