如何使用 Jquery 将新的 div 覆盖在整个 HTML 正文上？

Question

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

1. 我的 HTML 主体包含各种元素。

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

有什么帮助吗？

Answer 1

基本上，你需要 adiv大部分时间都是隐藏的，最好使用display: none，然后$( ".coverAll" ).show();当你想要覆盖屏幕时你会调用 a 。div 的样式如下。通过 z-index 将 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%;
}