jquery - 如何添加覆盖 DIV 以覆盖现有 DIV（使用 JQuery）？

Question

我有一个“容器”DIV，它可能具有所有可能的 CSS 样式，例如：边距、填充、边框和不同的位置（固定、相对、绝对）。

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

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

如何添加覆盖整个“容器”DIV 可见区域（不应覆盖边距区域）的覆盖 DIV（使用 JQuery）？

最好的问候，扎克

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>

演示：http: //jsfiddle.net/jKfTC/