在 Ajax 应用中，显示一个 Dialog（以 Div 方式显示）前，都会先建一个 Mask。因为经常会用到，所以写成了一个 jQuery 插件，方便自己的使用。

复制代码 代码如下:

(function($){

$.extend({

documentMask: function(options){

// 扩展参数

var op = $.extend({

opacity: 0.8,

z: 10000,

bgcolor: '#000'

}, options);

// 创建一个 Mask 层，追加到 document.body

$('<div></div>').appendTo(document.body).css({

position: 'absolute',

top: '0px',

left: '0px',

'z-index': op.z,

width: $(document).width(),

height: $(document).height(),

'background-color': op.bgcolor,

opacity: 0

}).fadeIn('slow', function(){

// 淡入淡出效果

$(this).fadeTo('slow', op.opacity);

}).click(function(){

// 单击事件，Mask 被销毁

$(this).fadeTo('slow', 0, function(){

$(this).remove();

});

});

return this;

}

});

})(jQuery);

使用方法

复制代码 代码如下:

$.documentMask();

$.documentMask({

'opacity': 0.6,

'bgcolor': '#E79673',

'z': 1000000

});

参数中，z 表示 z-index。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+