logo标签列表

覆盖整个可见网页的HTML叠加层高度

htmlcssdomjquery-ui
8
我有一个网页，使用AJAX加载一些内容。我希望在加载过程中显示一个带有加载指示器的遮罩层，以便用户无法与页面上的大部分内容进行交互-除了顶部的菜单。我正在使用jQuery和jQuery BlockUI插件来实现这一点。
我调用$(element).block()，它运行良好，但是遮罩层仅延伸到当前页面内容的范围。随着更多内容被加载并添加到页面中，遮罩层会随之下移，看起来有点丑陋。理想情况下，我希望它从一开始就覆盖整个可见区域。一个简单的hack方法是为遮罩层设置一个较大的高度值，如下所示：
$(myElement).block({
        overlayCSS: {
            height: '10000px'
        }
 });

...但这会创建一个滚动条！我该如何避免这种情况并使其恰好覆盖可见页面，而不是扩大它？

6个回答
24

使用position: fixed;代替position: absolute。这样覆盖层即使在滚动时也不会移动。

1
老兄，谢谢你的答案。这个问题让我疯了！ - user875139
固定位置是解决方案，如果页面使用动态加载/添加的页眉和页脚，请确保将覆盖层div放置在正确的位置，以便它也覆盖页眉和页脚... - Waqas Memon
2
在XHTML中，html和body元素并不像在HTML中那样神奇。body元素不会自动填充视口（窗口），它的大小只有其内容的高度。
要使元素填充窗口，您首先需要使html和body元素填充窗口：
html, body { height: 100%; }

接下来，您可以在元素中使用height: 100%;属性，使其覆盖整个高度。

这个解释很有道理，听起来很有前途，但在我的页面上并不完全适用。我认为这是因为它还使用了jQuery UI选项卡，动态加载，并且我怀疑从<html>开始的每个元素都必须设置"height: 100%"。 - EMP
1
以下代码最终对我起作用了：
$("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;
}

我参考了如下文章：让 div 高度占满浏览器窗口 唯一修改的地方是添加了左侧和右侧。我的叠加层只遮盖了屏幕的一半。
0

我已经为您制作了一个完整的示例，现在您可以在应用程序中使用它，并在ajax请求完成后将其隐藏。

点击这里！

<div class="overlay"></div>
<div id="container">
    content Whatever you want even you can delete this container
<div>
0
设置position为absolute，高度为100%。
0

对我有用！我将absolute更改为fixed。

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

showWaitPopup();
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;
}
<div class="bkdiv" id="bkdiv"></div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接