如何添加覆盖DIV以覆盖现有的DIV(使用JQuery)?

Zac*_*ach 21 jquery overlay

我有一个'容器'DIV,可能有所有可能的CSS样式,如:边距,填充,边框和不同的位置(固定,相对,绝对).

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

<div class="container">
 A lot of content here ...
</div>
Run Code Online (Sandbox Code Playgroud)

如何添加覆盖整个"容器"DIV可见区域的覆盖DIV(使用JQuery)(不应覆盖边缘区域)?

最好的问候,扎克

Vis*_*ioN 58

如果没有什么可以改变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"));
Run Code Online (Sandbox Code Playgroud)

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

  • 我建议您先在css文件中定义所有样式,而不是使用jQuery动态应用它.像这样http://jsfiddle.net/jKfTC/1/ (4认同)
  • @Cody它是CSS文件的'z-index`和HTML元素的内联样式.在JavaScript中,您可以使用`style`对象的`zIndex`属性.jQuery可以同时接受"z-index"`(键作为字符串)和`zIndex`(就这么简单). (3认同)