JQuery Mask Layer Implementation (mask) Implementation code _jquery

There are two methods, mask () and unmask (), which add a mask layer and a hint message implementation to the specified element to increase the customer experience. As a result of the recent project, found that sometimes in order to use these one or two methods need to introduce a relatively "large" ExtJS come in, feel a bit uneconomical, so I use jquery to implement a relatively simple mask, unmask method to achieve this effect. As you know jquery is a good JavaScript framework, not only small and easy to use, I now gradually replace the system with the EXTJS implementation of the code or the formation of all into jquery to achieve. Well, not much to say, on my code, the code is based on a friend of the online implementation of the Documentmask based on the rectification. Make the use more flexible and convenient.
(No technical content intended to help friends who need it)

Copy Code code 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 to the object
var maskdiv=$ (' <div class= "Maskdivgen" > </div> ");
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=$ (' <div style= "Position:absolute;border: #6593cf 1px solid; Padding:2px;background: #ccca" ><div Style= "Line-height:24px;border: #a3bad9 1px solid;background:white;padding:2px 10px 2px 10px" > ' +msg+ ' </div> </div> ');
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 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 ();
});
}
});
})();

Here is an example code to use for reference
Code

Copy Code code as follows:

<style>
body{
font-size:12px;
}
</style>
<script src= "Http://img.jb51.net/jslib/jquery/jquery-1.3.2.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
(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 to the object
var maskdiv=$ (' <div class= "Maskdivgen" > </div> ");
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=$ (' <div style= "Position:absolute;border: #6593cf 1px solid; Padding:2px;background: #ccca" ><div Style= "Line-height:24px;border: #a3bad9 1px solid;background:white;padding:2px 10px 2px 10px" > ' +msg+ ' </div> </div> ');
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 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 ();
});
}
});
})();
</script>
<body style= "width:100%" >
Test
<div id= "test" style= "width:200px;height:100px; Border:black 1px solid; " >
</div>
<a href= "#" onclick= "$ (' #test '). Mask (' div layer mask ')" >div mask </a>
<a href= "#" onclick= "$ (' #test '). unmask ()" > Close div mask </a>
<a href= "#" onclick= "$ (document). Mask (' Full screen Mask '). Click (function () {$ (document). unmask ()}) > All Masks </a>
</body>