Native js pop-up layer and the window inside it is centered_javascript skills

Copy code The code is as follows: New Document * { padding:0px; margin:0px; } #Idiv { width:900px; height:auto; position:absolute; z-index:1000; border:2px solid #ffffff; background:#ffffff; } 点击关闭层 document.documentElement 的区别 document.documentElement 的区别 点击打开弹出层！ function show() { var Idiv=document.getElementById("Idiv") ; Idiv.style.display="block"; //The following parts should center the pop-up layer Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2 document .documentElement.scrollLeft "px"; //alert(document.body.scrollTop) var aa_scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; Idiv. style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2 aa_scrollTop "px"; //There is a problem here. The pop-up layer is centered on the left and right, but the height is not centered. It is displayed in the upper part, causing a //Part of it is invisible, so temporarily add margin-top below //The following part makes the entire page gray and unclickable var procbg = document.createElement("div"); / /First create a div procbg.setAttribute("id","mybg"); //Define the id of the div procbg.style.background ="#000000"; procbg.style.width ="100%"; procbg.style.height ="100%"; procbg.style.position ="fixed"; procbg.style.top ="0"; procbg .style.left ="0"; procbg.style.zIndex ="500"; procbg.style.opacity ="0.6"; procbg.style.filter ="Alpha(opacity=70 )"; //Cancel the scroll bar document.body.appendChild(procbg); document.body.style.overflow ="auto"; //The following parts implement pop-up Drag effect of layer (if you want to pop up the div movement within the layer, just remove the following logout) /* var posX; var posY; Idiv.onmousedown=function(e ) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(Idiv.style.left); posY = e.clientY - parseInt (Idiv.style.top); document.onmousemove = mousemove; } document.onmouseup =function() { document.onmousemove =null; } function mousemove(ev) { if(ev==null) ev = window.event;//IE Idiv.style.left = (ev.clientX - posX) "px"; Idiv.style.top = (ev.clientY - posY) "px"; }*/ } function closeDiv() //Close the popup layer { var Idiv=document.getElementById("Idiv"); var mybg = document.getElementById("mybg"); document.body.removeChild(mybg); Idiv.style. display="none"; document.body.style.overflow ="auto";//Restore the page scroll bar //document.getElementById("mybg").style.display="none"; } //Change the pop-up layer above and create your own loading function.Determine whether the page has been loaded, and hide loading.gif after completion New Document function show(addressImg, img_w, img_h) { //Get the page height var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; //Get the page width var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth; var procbg = document.createElement("div"); //First create a div procbg.setAttribute("id", "mybg"); //Define the id of the div procbg.style.background = "#555"; procbg.style.width = "100%"; procbg.style.height = "100%"; procbg.style.position = "fixed"; procbg.style.top = "0"; procbg.style.left = "0"; procbg.style.zIndex = "500"; procbg.style.opacity = "0.6"; procbg.style.filter = "Alpha(opacity=70)"; //Cancel the scroll bar document.body.appendChild(procbg); document.body.style.overflow = "auto "; var pimg = document.createElement("img"); //Create an img pimg.setAttribute("id", "bg_img"); //Define the div id pimg.setAttribute("src", addressImg); //Define the id of the div var img_w = (w - img_w) / 2; var img_h = (h - img_h) / 2; pimg.style.top = img_h "px"; pimg.style.left = img_w "px"; pimg.style.position = "fixed"; pimg.style.opacity = "0.9"; document.getElementById("mybg").appendChild(pimg); } function closeDiv() //Close the popup layer { var mybg = document.getElementById ("mybg"); document.body.removeChild(mybg); document.body.style.overflow = "auto";//Restore the page scroll bar //document.getElementById("mybg ").style.display="none"; } show('loading/loading3.gif', '100', '100'); document.onreadystatechange = subSomething;//When the page Execute this method when the loading status changes. function subSomething() { if (document.readyState == "complete") { //When the page loading status is completely completed, enter closeDiv(); } }

Native js pop-up layer and the window inside it is centered_javascript skills

Related articles