Ajax アプリケーションでは、ダイアログ (Div モードで表示) を表示する前に、最初にマスクが作成されます。よく使われるので、自分が使いやすいように jQuery プラグインとして作成しました。
(function($){
$.extend ({
documentMask: function(options){
// 拡張パラメータ
var op = $.extend({
opacity: 0.8,
z: 10000,
bgcolor: ' #000'
}, options);
// マスクレイヤーを作成し、 document.body に追加します
$('
< ;/div> ').appendTo(document.body).css({
位置: '絶対',
上: '0px',
左: '0px',
'z-インデックス': op .z,
幅: $(document).width(),
高さ: $(document).height(),
'背景色': op.bgcolor,
opacity: 0
}).fadeIn('slow', function(){
// フェードインおよびフェードアウト効果
$(this).fadeTo('slow', op.opacity);
}).click (function(){
// クリックイベント、マスクは破棄されます
$(this).fadeTo('slow', 0, function(){
$(this).
});
});
});
使い方
コードをコピー
'z': 1000000
} );
パラメータのうち、z は z-index を表します。
互換性
IE 6.0、FF2、Safari 3.1、Opera 9.0をサポート