jquery - 如何使用 Jquery 在整个 HTML 主体上覆盖一个新的 div？

Question

我遇到了与 here. 类似的问题.在 Ajax 请求期间，我试图将加载图标的背景图像和灰色背景放在一起，但灰色背景不会延伸到页面底部。当我滚动时，它消失了。 我尝试了该帖子中建议的补救措施，但没有任何帮助。 我想重新插入一个全新的 div，它覆盖整个 html 主体，背景为灰色，带有加载图标。但我真的不知道该怎么做。 所以问题是使用 Jquery

1. 我的 HTML 正文包含各种元素。

2. 使当前内容不可见或变灰，放置一个覆盖整个 HTML 正文的新 div(基本上在当前 HTML 正文之上)并用灰色背景填充它

有什么帮助吗？

Answer 1

基本上，您将需要一个大部分时间隐藏的 div，最好使用 display: none，然后您将调用一个 $( ".coverAll").show(); 当你想覆盖屏幕时。 div 的样式如下。通过 z-index'ing 将 div 置于其余内容之上，您可以有效地将内容隐藏在它后面。

HTML:

<div class="coverAll">Loading...</div>

CSS:

.coverAll {
    z-index: 1000;
    background-color: #CCC;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}