Question

我有一个使用AJAX加载一些内容的网页。我想在加载过程中显示带有加载指示符的叠加层，这样用户就无法与大部分页面进行交互 - 除了顶部的菜单。我正在使用jQuery和jQuery BlockUI plugin来执行此操作。

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

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

...但这会创建一个滚动条！如何避免这种情况并将其设置为覆盖可见页面的正确高度，但不能将其放大？

Answer 1

使用position: fixed;代替position: absolute。这样，即使滚动，叠加层也不会移动。

Answer 2

在XHTML中，html和body元素并不像HTML那样神奇。 body元素不会自动填充视口（窗口），它的大小只有它的内容一样高。

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

html, body { height: 100%; }

然后你可以在身体的元素上使用height: 100%;使其覆盖整个高度。

Answer 3

将position设置为absolute，将身高设置为100％。

Answer 4

我已经为你做了一个完整的例子，现在你可以在你的应用程序中使用它，并在ajax请求完成后隐藏它。

点击here！

<div class="overlay"></div>
<div id="container">
    content Whatever you want even you can delete this container
<div>

Answer 5

以下代码最终为我工作：

$("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;
}

我使用以下帖子作为参考：Make div 100% height of browser window 我必须做的一个修改就是左右添加。我的叠加层只覆盖了屏幕的一半。

Answer 6

为我工作！我将absolute更改为fixed。

＆＃13;

function showWaitPopup() {
  var obj = document.getElementById('bkdiv');
  if (obj) {
    obj.style.display = 'block';
  }
  return true;
}

showWaitPopup();

＆＃13;

div.bkdiv {
  background-color: #000000;
  opacity: 0.6;
  filter: alpha(opacity=60);
  z-index: 2000;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 200%;
  display: none;
}

＆＃13;

<div class="bkdiv" id="bkdiv"></div>

＆＃13;

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

6 个答案: