Javascript mask layer and load effect code

This article introduces the JavaScript mask layer and the load effect code, and friends who need it can refer to the copy code code as follows:

//loading


function Showload (tipinfo) {


var iwidth = 120; The width of the pop-up window;


var iheight = 0; The height of the pop-up window;


var scrolltop = 0;


var scrollleft = 0;


var cheight = 0;


var cwidth = 0;


var etip = document.createelement (' div ');


etip.setattribute (' id ', ' tipdiv ');


eTip.style.position = ' absolute ';


eTip.style.display = ' none ';


ETip.style.border = ' solid 0px #D1D1D1 ';


eTip.style.backgroundColor = ' #4B981D ';


eTip.style.padding = ' 5px 15px ';


if (DOCUMENT.BODY.SCROLLTOP) {//This is a JS compatible


Scrollleft=document.body.scrollleft;


Scrolltop=document.body.scrolltop;


Cheight=document.body.clientheight;


Cwidth=document.body.clientwidth;


}


else{


Scrollleft=document.documentelement.scrollleft;


Scrolltop=document.documentelement.scrolltop;


Cheight=document.documentelement.clientheight;


Cwidth=document.documentelement.clientwidth;


}


iheight = etip.offsetheight;


var v_left= (cwidth-iwidth)/2 + scrollleft; //


var v_top= (cheight-iheight)/2+ scrolltop;


eTip.style.left = v_left + ' px ';


eTip.style.top = v_top + ' px ';


etip.innerhtml = ' <img src= ' images/loading.gif ' style= ' float:left; '/> <span ' color: #ffffff; font-size:12px ' > ' + tipinfo + ' </span> ';


try {


Document.body.appendChild (Etip);


} catch (e) {}


$ ("#tipDiv"). CSS ("float", "right");


$ ("#tipDiv"). CSS ("Z-index", "99");


$ (' #tipDiv '). Show ();


Showmark ();


}


function Closeload () {


$ (' #tipDiv '). Hide ();


Hidemark ();


}


//Display gray layer


function Showmark () {


var Xp_mark = document.getElementById ("Xp_mark");


if (Xp_mark!= null) {


//Set div


xp_mark.style.left = 0 + "px";


xp_mark.style.top = 0 + "px";


xp_mark.style.position = "absolute";


Xp_mark.style.backgroundColor = "#000";


Xp_mark.style.zIndex = "1";


if (document.all) {


xp_mark.style.filter = "alpha (opacity=50)";


var ie_ver = navigator["AppVersion"].substr (22, 1);


if (ie_ver = 6 | | Ie_ver = = 5) {hideselectboxes ();}


}


else {xp_mark.style.opacity = "0.5";}


xp_mark.style.width = "100%";


Xp_mark.style.height = "100%";


xp_mark.style.display = "block";


}


else {


//page Add div explaindiv, note must be immediately following the first element within the body. Otherwise the IE6 is not normal.


$ ("body"). Prepend ("<div id= ' Xp_mark ' style= ' Display:none ') ></div> ");


Showmark (); Keep Back to yourself


}


}


//Hidden gray layer


function Hidemark () {


var Xp_mark = document.getElementById ("Xp_mark");


Xp_mark.style.display = "None";


var ie_ver = navigator["AppVersion"].substr (22, 1);


if (ie_ver = 6 | | Ie_ver = = 5) {showselectboxes ();}


}