If ExtJs is used, you may know that many UI elements are integrated in ExtJs, which makes it easy for us to use. There are two methods, mask () and unmask (). These two methods add a mask layer and a notification message implementation on the specified element to improve the customer experience. Recently, when I was working on a project, I found that sometimes I need to introduce a relatively "large" Extjs to use these two methods, which is a bit uneconomical, therefore, jquery is used to implement a simple mask and unmask method to achieve this effect. As we all know, jquery is an excellent javascript framework, which is not only small but also easy to use. Now I gradually replace all or all the Code implemented by Extjs IN THE SYSTEM WITH Jquery for implementation. Well, I don't know much about it. On my code, this Code is based on the documentMask implemented by a friend on the Internet. It makes use more flexible and convenient.
(It has no technical skills and is intended to help those who need it)
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]! Invalid parameter Doc ument ){
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 ('quick', function (){
// Fade-in and fade-out effect
$ (This). fadeTo ('low', op. opacity );
})
Return maskDiv;
},
Unmask: function (){
Var original = $ (document. body );
If (this [0] & this [0]! Invalid parameter Doc ument ){
Original = $ (this [0]);
}
Original. find ("> p. maskpgen"). fadeOut ('low', 0, function (){
$ (This). remove ();
});
}
});
})();
The following is an example code for your reference.
Code
The Code is as follows:
