jQuery page Mask implementation code_jquery

In Ajax applications, before displaying a Dialog (displayed in Div mode), a Mask will be created first. Because it is often used, I wrote it as a jQuery plug-in to facilitate my own use.

Copy code The code is as follows:

(function($){
$.extend ({
documentMask: function(options){
// extended parameter
var op = $.extend({
opacity: 0.8,
z: 10000,
bgcolor: ' #000'
}, options);

// Create a Mask layer and append it to 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(){
// Fade in and out effect
$(this).fadeTo('slow', op.opacity);
}).click (function(){
// Click event, Mask is destroyed
$(this).fadeTo('slow', 0, function(){
$(this).remove();
});
});

return this;
}
});
})(jQuery);

How to use

Copy code The code is as follows:

$.documentMask();
$.documentMask({
'opacity': 0.6,
'bgcolor': '#E79673',
'z': 1000000
});

Among the parameters, z represents z-index.

Compatibility
Supports IE 6.0, FF2, Safari 3.1, Opera 9.0