JQuery 遮罩层(mask)实现代码

在 JQuery 遮罩层效果实现代码中,其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。

有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。

这些代码是根据网友实现的documentMask基础上进行整改的。更加灵活方便了。 
 

复制代码代码示例:
(function(){ 
$.extend($.fn,{ 
mask: function(msg,maskDivClass){ 
this.unmask(); 
// 参数 
var op = { 
opacity: 0.8, 
z: 10000, 
bgcolor: '#ccc' 
}; 
var original=$(document.body); 
var position={top:0,left:0}; 
if(this[0] && this[0]!==window.document){ 
original=this; 
position=original.position(); 

// 创建一个 Mask 层,追加到对象中 
var maskDiv=$('
'); 
maskDiv.appendTo(original); 
var maskWidth=original.outerWidth(); 
if(!maskWidth){ 
maskWidth=original.width(); 

var maskHeight=original.outerHeight(); 
if(!maskHeight){ 
maskHeight=original.height(); 

maskDiv.css({ 
position: 'absolute', 
top: position.top, 
left: position.left, 
'z-index': op.z, 
width: maskWidth, 
height:maskHeight, 
'background-color': op.bgcolor, 
opacity: 0 
}); 
if(maskDivClass){ 
maskDiv.addClass(maskDivClass); 

if(msg){ 
var msgDiv=$('
'+msg+'
'); 
msgDiv.appendTo(maskDiv); 
var widthspace=(maskDiv.width()-msgDiv.width()); 
var heightspace=(maskDiv.height()-msgDiv.height()); 
msgDiv.css({ 
cursor:'wait', 
top:(heightspace/2-2), 
left:(widthspace/2-2) 
}); 

maskDiv.fadeIn('fast', function(){ 
// 淡入淡出效果 
$(this).fadeTo('slow', op.opacity); 
}) 
return maskDiv; 
}, 
unmask: function(){ 
var original=$(document.body); 
if(this[0] && this[0]!==window.document){ 
original=$(this[0]); 

original.find("> div.maskdivgen").fadeOut('slow',0,function(){ 
$(this).remove(); 
}); 

}); 
})();

JQuery 遮罩层 实例代码:
 

复制代码代码示例:
 
 
 
 
 
 
 
测试 
 
 
div遮罩 
关闭div遮罩 
全部遮罩 
 

你可能感兴趣的:(jquery)