JQuery mask layer implementation (mask) implementation code_jquery

There are two methods, mask() and unmask(), which add a mask layer and a prompt message to the specified element to increase customer experience. When I was working on a project recently, I found that sometimes in order to use these two methods, I needed to introduce a relatively "large" Extjs, which I felt was a bit uneconomical, so I used jquery to implement a relatively simple mask and unmask method to achieve this effect. Everyone knows that jquery is an excellent javascript framework. It is not only small in size but also easy to use. Now I am gradually replacing all the codes or components implemented using Extjs in the system with Jquery. Okay, without further ado, here are my codes. These codes are rectified based on the documentMask implemented by a friend on the Internet. Makes it more flexible and convenient to use.
(no technical content, designed to help those in need)

Copy code The code is as follows:

(function(){
$.extend($.fn,{
mask: function(msg,maskDivClass){
this.unmask();
// Parameters
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();
}
// Create a Mask layer and append it to the object
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(){
// Fade in and out effect
$(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();
});
}
});
})();

The following is the example code for reference
Code

Copy code The code is as follows:

');
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();
});
}
});
})();



测试

div遮罩
关闭div遮罩
全部遮罩