當div擴展頁面高度時，javascript疊加不覆蓋整頁

Question

我意識到已經存在這樣的幾個問題，但我認為我的情況有點不同。
我有一個div，我絕對定位並漂浮在頁面頂部，我在它后面設置一個疊加層，使頁面的其余部分變灰。 我讓它工作正常，直到你在頁面上下滾動。

問題是，當div出現時，它仍然填充了ajax數據。 因此，已經設置了bg疊加的高度和寬度，但是一旦所有數據加載到浮動div中，它有時會向下推動頁面以使高度增加。 因此，我無法計算窗口或文檔的高度和寬度，因為浮動div可能尚未完全加載，一旦它完成，它會進一步向下推動屏幕，導致bg疊加層不覆蓋整個頁面。

例如，在代碼中，它會像：

loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());

}

我通過添加警報來驗證這一點，以便在我點擊警報時，bg疊加層能夠計算真實的頁面大小，看起來很好。 對不起，如果這聽起來令人困惑，但希望你能得到我想要達到的目標。 我認為這不是太難，但我無法弄明白。 任何幫助將不勝感激，我正在使用jquery。

謝謝

Answer 1

疊加;）

**更新，將所有角落的位置設置為0，而不是使用寬度/高度100％**

$("<div/>")
 .css({
    position:"fixed", // ze trick 
    background:"#000",
    opacity:.5,
    top:0,
    bottom: 0,
    left:0,
    right: 0,
    zIndex: 2999 // everything you want on top, gets higher z-index
  })
 .appendTo("body");

或者將上述css設置放在css樣式表中（不透明度需要跨瀏覽器黑客）。

$("#dark-overlay").show();

Answer 2

這是解決方案：

JQuery Show加載插件

不要試圖發明輪子！

這是一個演示：

加載演示

現在您只需要為您的頁面創建一個主容器div，並且只需要這個簡單的插件就可以為您完成。

也許你想閱讀插件源並找到它是如何工作的......