25

マージン、パディング、ボーダー、および異なる位置 (固定、相対、絶対) などのすべての可能な CSS スタイルを持つことができる「コンテナー」DIV があります。

「コンテナー」DIV の上に読み込みアイコンを表示し、ユーザーが「コンテナー」DIV 内のコントロールを操作できないようにします。

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

「コンテナ」の DIV 表示領域全体をカバーするオーバーレイ DIV (JQuery を使用) を追加するにはどうすればよいですか (マージン領域はカバーしないでください)。

よろしく、ザック

4

1 に答える 1

63

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/

于 2012-12-07T01:31:23.250 に答える