覆盖整个可见页面的HTML覆盖高度

我有一个使用AJAX加载一些东西的网页。我想在加载过程中显示一个带有加载指示器的覆盖图，这样用户就不能与页面的大部分内容交互——除了顶部的菜单。我正在使用jQuery和

我调用$（element）.block（），它可以正常工作，但覆盖范围仅扩展到页面的当前内容。随着更多内容被加载并添加到页面中，覆盖层随之向下移动，这看起来有点难看。理想情况下，我希望它从一开始就覆盖页面的整个可见区域。这样做的一个简单方法是为覆盖设置一个较大的高度值，如下所示：

$(myElement).block({
        overlayCSS: {
            height: '10000px'
        }
 });

---

。。。但这会创建一个滚动条！如何避免这种情况，并使其正好覆盖可见页面，而不是将其放大？

将

位置设置为
绝对值
，高度设置为100%。
在XHTML中，html和body元素没有html中那么神奇。body元素不会自动填充视口（窗口），它的大小仅与其内容一样高

要使元素填充窗口，首先必须使html和body元素填充窗口：

html, body { height: 100%; }

然后您可以使用
高度：100%在主体中的一个元件上，使其覆盖整个高度。
使用
位置：固定而不是
位置：绝对
。这样，即使您滚动，覆盖也不会移动。
我已经为您制作了一个完整的示例，现在您可以在应用程序中使用它，并在ajax请求完成后将其隐藏

点击


无论您想要什么内容，甚至可以删除此容器
以下代码最终对我有效：

$("body").block({
  message: '<h2>Loading...</h2>',
  overlayCSS: {
    position: 'absolute',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0'
  }
});

body {
  color: #004A6E;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

$（“body”）.block({
消息：“正在加载…”，
覆盖层：{
位置：'绝对'，
顶部：“0”，
底部：“0”，
左：“0”，
右：“0”
}
});
身体{
颜色：#004A6E；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}

我使用以下帖子作为参考：
我必须做的一个修改是添加左和右。我的覆盖层只覆盖了屏幕的一半。
对我很有效！我将
绝对值
更改为
固定值


函数showWaitPopup（）{
var obj=document.getElementById（'bkdiv'）；
如果（obj）{
obj.style.display='block'；
}
返回true；
}
showWaitPopup（）
div.bkdiv{
背景色：#000000；
不透明度：0.6；
过滤器：α（不透明度=60）；
z指数：2000；
位置：固定；
顶部：0px；
左：0px；
宽度：100%；
身高：200%；
显示：无；
}
这个解释很有道理，听起来很有希望，但在我的页面上不太起作用。我认为这是因为它还使用jQuery UI选项卡，动态加载，我怀疑从下到下的每个元素都必须设置“高度：100%”。伙计，谢谢你的回答。这个问题快把我逼疯了！位置固定是解决方案，如果页面使用通过另一个模板动态加载/添加的页眉和页脚，请确保将覆盖div放置在正确的位置，以便它也覆盖页眉和页脚。。。
$("body").block({
  message: '<h2>Loading...</h2>',
  overlayCSS: {
    position: 'absolute',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0'
  }
});

body {
  color: #004A6E;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}