web-dev-qa-db-ja.com

オーバーレイDIVを追加して既存のDIVをカバーする方法（JQueryを使用）

私は「コンテナ」DIVを持っています。これには、マージン、パディング、ボーダー、異なる位置（固定、相対、絶対）などのすべての可能なCSSスタイルがあります。

「コンテナー」DIVの上に読み込みアイコンを表示し、ユーザーが「コンテナー」DIV内のコントロールを操作することを禁止したいのですが。

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

「コンテナー」DIV可視領域全体をカバーする（DIVを使用して）オーバーレイDIVを追加するにはどうすればよいですか（マージン領域はカバーしないでください）。

よろしく、ザック

jqueryoverlay
23
Zach

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/

61
VisioN