当div扩展页面高度时，javascript覆盖层未完全覆盖整个页面

Question

我知道已经有几个类似的问题，但我认为我的情况有点不同。我有一个div，我使用绝对定位和浮动在页面上方，并设置了一个灰色的遮罩层覆盖其余部分。我已经让它正常工作，但当您上下滚动页面时，就会出现问题。

问题在于，当div出现时，它仍在使用ajax数据进行填充。因此，背景覆盖层的高度和宽度已经设置好了，但是一旦所有数据加载到浮动的div中，它有时会将页面向下推，从而增加高度。因此，我无法计算窗口或文档的高度和宽度，因为浮动的div可能尚未完全加载，一旦加载完成，它会进一步向下推屏幕，导致背景覆盖层无法覆盖整个页面。

例如，在代码中，它大致如下：

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

}

我通过添加一个警告来验证这一点，因此当我点击警告时，背景叠加层可以计算出真实的页面大小，并且看起来很好。 如果这听起来让人困惑，那我很抱歉，但希望你能理解我试图实现什么。我认为这不太难，但我还没有找到解决办法。 任何帮助都将不胜感激，我正在使用jquery。

谢谢

- Munzilla

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样式表中（透明度需要跨浏览器的hack）。

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

- BGerrissen

---

当您的内部div大小大于屏幕大小时，它将无法正常工作。 - Farzin Zaker

@Farzin 是的，fixed 定位是相对于视口而不是页面的，因此当您开始滚动时，整个视口仍然被覆盖。 - jeroen

复制代码，将其粘贴到此网站的浏览器控制台中（jQuery已加载），然后查看它的工作情况 ;) - BGerrissen

我漏掉了position: fixed这一部分！谢谢，我知道它肯定是相对简单的东西。 - Munzilla

注意：在大多数移动浏览器中，position:fixed是被禁用的，但如果在移动站点中使用模态框是一件好事... - BGerrissen

另外需要注意的是，IE5/6不支持position:fixed属性。可以使用position:absolute作为替代方案，仍需将宽度/高度设置为100%，并在onscroll事件中重新定位遮罩层，而不是计算视口的宽度/高度。但说实话，不建议支持IE6及以下版本... - BGerrissen

Answer 2

这是解决方案：

JQuery Show Loading Plugin

不要试图重复造轮子！！！

这里有一个演示：

Loading Demo

现在你只需要为页面创建一个主容器 div，然后让这个简单的插件为你完成它。

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

- Farzin Zaker

---

唯一的问题是回调函数将数据填充到浮动div中，同时也计算了背景覆盖层的高度和宽度。因此，我认为在计算背景覆盖层高度时，浮动div仍在扩展（从而扩展页面的高度）。 - Munzilla

使用这个jQuery插件，你不需要手动设置浮动div的大小。jQuery插件会为您完成它。你只需要调用你的Ajax方法，所有与浮动div有关的事情都将由这个jQuery库控制。 - Farzin Zaker