A simple example of JavaScript writing a page semitransparent mask effect _javascript Tips

Translucent matte layer effect is basically the use of plug-ins to achieve, below for everyone to share the use of native JS to achieve translucent matte effect, interested friends can refer to ha, I hope you are familiar with the native JS help

<div >  

Full-screen cloaking

<!
 DOCTYPE html> <style> #mask {position:fixed;width:100%;
 top:0px;left:0px;
 _position:absolute;
 _top:expression (Documentelement.scrolltop);
 Background:rgba (0,0,0,0.5);
 background:transparent\9;
 Filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= #80000000, endcolorstr= #80000000);
Display:none; } #mask_td {Text-align:center} </style>  &L
T;table id= "Mask" ><tr><td id= "MASK_TD" ></td></tr></table> <script>//Judge Browser
var isie=navigator.useragent.match (/msie (\d)/i);
Isie=isie?isie[1]:isie;
DECLARE variable var img,mask;
Gets the element Img=document.getelementbyid ("img");
Mask=document.getelementbyid ("Mask");
Mask.td=document.getelementbyid ("Mask_td");
 Calculates the size of the Mask mask.setsize=function () {//Gets the visible area width of the document and sets it to the mask var de=document.documentelement;
mask.style.width=de.clientwidth+ "px" mask.style.height=de.clientheight+ "px";
}; Add Show Method Mask.show=function () {//Hide the page scroll bar document[isie<9? "
 DocumentElement ":" "Body"].style.overflow= "hidden";
 Calculate the size of the Mask mask.setsize (); Show mask.style.display=isie==6? "
Block ":" Table ";
}; Add Hide Method Mask.hide=function () {//Show page scroll bar document[isie<9? "
 DocumentElement ":" The Body "].style.overflow=";
 Empty the contents of the inside mask.td.innerhtml= "";
Hide mask.style.display= "None";
};
Add Append Method Mask.append=function (e) {//Add content in mask TD you Mask.td.appendChild (e);}; Click Mask Close Mask.onclick=function (e) {//Judge event source, close mask if blank area is clicked E=e| |
 Event (e.target| |
e.srcelement) ==mask.td&&mask.hide ();
};
Changes in the size of the form also change the size of the Mask window.onresize=function () {mask.setsize ();};
 Click on the Picture Event img.onclick=function () {///Create a Picture object var o=new image;
 Set the address of the picture o.src=img.src;
 Add content to the Mask mask.append (o);
Display mask mask.show ();
};
 </script>