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 Loading Plugin

不要试图发明轮子!!!

这是一个演示：

Loading Demo

现在您只需要为您的页面创建一个主容器div，并且只需要这个简单的插件就可以为您完成。

也许你想阅读插件源并找到它是如何工作的......

当div扩展页面高度时，javascript叠加不覆盖整页

2 个答案: