如何使用JQuery添加一个覆盖在已有DIV上的叠加层DIV？

Question

我有一个“容器”DIV，它可能具有所有可能的CSS样式，如：margin、padding、border和不同的position（fixed、relative、absolute）。

我想在“容器”DIV上方显示一个加载图标，并禁止用户操作“容器”DIV中的任何控件。

<div class="container">
 A lot of content here ...
</div>

我该如何使用JQuery添加一个覆盖整个“container” DIV可见区域的叠加层DIV（不应覆盖边距区域）？

最好的问候， Zach

- Zach

Answer 1

如果CSS没有任何更改，则：

$("<div />").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    left: 0,
    top: 0,
    zIndex: 1000000,  // to be on the safe side
    background: "url(/img/loading.gif) no-repeat 50% 50%"
}).appendTo($(".container").css("position", "relative"));

$("<div>Loading...</div>").css({
  position: "absolute",
  width: "100%",
  height: "100%",
  top: 0,
  left: 0,
  background: "#ccc"
}).appendTo($(".container").css("position", "relative"));

.container {
  border: 1px solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  A lot of content here ...
</div>

DEMO: http://jsfiddle.net/jKfTC/

- VisioN

---

在设置 .container 的位置之前，检查它是否具有“静态”定位可能是一个好主意……这样可以使您的代码可重用。 - Ryan Wheale

我建议在CSS文件中定义所有的样式，而不是使用jQuery动态应用样式。 可以参考这个 jsfiddle 链接：http://jsfiddle.net/jKfTC/1/ - 3dgoo

你可以像这样使加载容器四周多出1像素的空间：http://jsfiddle.net/jKfTC/3/ - 3dgoo

在CSS文件和HTML元素的内联样式中，z-index 是用于控制层叠顺序的属性。在JavaScript中，可以使用style对象的 zIndex 属性。jQuery既可以接受字符串类型的 "z-index" （键），也可以接受直接使用 zIndex 的方式。 - VisioN

这就是我一直在寻找的。 - Juliyanage Silva