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("> p.maskpgen").fadeOut('slow',0,function(){

$(this).remove();

});

}

});

})();

下面是使用实例代码可供参考

代码

复制代码 代码如下:

body{

font-size:12px;

}

(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("> p.maskpgen").fadeOut('slow',0,function(){

$(this).remove();

});

}

});

})();

测试

p遮罩

关闭p遮罩

全部遮罩