Question

我遇到与发布here.类似的问题。在Ajax请求期间，我试图将加载图标和灰色背景的背景图像，不知何故灰色背景不会延伸到页面底部。当我滚动时，它会消失。我在那篇文章中尝试过补救措施，但都没有帮助。我想重新使用一个覆盖整个html主体的全新div，并使用加载图标进行背景灰色处理。但我真的不知道该怎么做。所以问题是使用Jquery

我的HTML主体包含各种元素。
使当前内容不可见或灰显，放置一个覆盖整个HTML主体的新div（基本上位于当前HTML主体之上）并用灰色背景填充

任何帮助？

Answer 1

基本上，您需要大部分时间都隐藏的div，最好是display: none，然后当您想要覆盖屏幕时，您会调用$( ".coverAll" ).show();。 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%;
}

Answer 2

我使用jQuery BlockUI插件在ajax请求期间禁用用户与页面的交互，这是一个链接：

http://malsup.com/jquery/block/

包含jquery.blockUI.js文件，然后将以下行添加到页面上的脚本标记中：

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

在页面上的所有jQuery ajax请求期间，将阻止用户交互。

上面的链接包括几种自定义方式。上面的示例使用了所有默认值。

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

2 个答案: