当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();