在 ajax 应用中，显示一个 dialog（以 div 方式显示）前，都会先建一个 mask。因为经常会用到，所以写成了一个 jquery 插件，方便自己的使用。
复制代码 代码如下:
(function($){
$.extend({
documentmask: function(options){
// 扩展参数
var op = $.extend({
opacity: 0.8,
z: 10000,
bgcolor: '#000'
}, options);
// 创建一个 mask 层，追加到 document.body
$(' 
').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+