jquery - jqueryとcssでdivレイヤーを選択不可にする方法

Question

私は以下のようなdiv要素を持っています：

 <div id="wrapper">Content......</div>

このdivレイヤーのコンテンツをajax呼び出しから取得しています。私がやりたいのは、そのdivをクリック不可、選択不可、可視性を低下させ、そのdivの上に読み込み中の画像を表示したいということです。これどうやってするの？なにか提案を

Answer 1

必要なのはCSSだけです。

user-select: none;
-moz-user-select: none;
-khtml-user-select: none;

そして、中央のdivの上の読み込み画像の場合：

CSS：

#loading_spinner {
  position:absolute;
  width:20px;
  height:20px;
  background:url('image/path');
  display:none;
  z-index: 1000;
}

jQuery：

var target = $('#target'); // or this

$('body').append('<div id="loading"></div>');
$('#loading').css({
  left: ($(target).offset().left + $(target).outerWidth()/2) - ($(this).outerWidth()/2),
  top: ($(target).offset().top + $(target).outerHeight()/2) - ($(this).outerHeight()/2),
  display: 'block'
});

Answer 2

あなたはjqueryパッケージに行くことができます：http： //www.malsup.com/jquery/block/

これにより、読み込み中にコンテンツを選択不可にし、その上に読み込み中の画像を追加できます。これはプラグインによってサポートされています。

Answer 3

CSSのみを使用して「コンテンツ....」の上に画像を読み込むには。

HTML

<div id="wrapper"><img id="LoadingImage" src=""/><span id="content">Content......</span></div>

スタイル

#wrapper{position:relative;}
#LoadingImage{position:absolute; z-index:2; left:0px; top:0px; opacity:0.5;}
#content{position:absolute; z-index:1; left:0px; top:0px;}