javascript

Native js pop up layer and the window within it is centered


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
*
{
padding:0px;
margin:0px;
}
#Idiv
{
width:900px;
height:auto;
position:absolute;
z-index:1000;
border:2px solid #ffffff;
background:#ffffff;
}
</style>

</HEAD>
<body>

<div id="Idiv" style="display:none;">
<a href="javascript:void(0)" onclick="closeDiv()"> Click close layer </a>
<br/>document.documentElement  The difference between <br/>document.documentElement  The difference between
</div>
<div><a href="javascript:void(0)" id="show" onclick="show()"> Click open pop-up layer! </div>
</body>
<script langue="javascript">

function show()
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="block";
//The following sections 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, pop layer left and right center, but the height is not center, show in the upper part, resulting in a  // Part invisible , So I'm going to add it down here for now margin-top


//The following sections make the entire page 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 scroll bar
document.body.appendChild(procbg);
document.body.style.overflow ="auto";

//The following section implements the drag and drop effect of the pop-up layer (if you want the div inside the pop-up layer to move, just log off and remove the following)
/*
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 ejection 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";
}
</script>
</HTML>
//Change the above pop-up layer to do its own loading with a loading function. Determine whether the page is loaded, and then hide the loading. GIF

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="subSomething()">


</body>
<script type="text/ecmascript">
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 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 id of the div
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 ejection 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;//Execute this method when the page load state changes.
function subSomething() {
if (document.readyState == "complete") { //Enters when the page is fully loaded
closeDiv();
}
}
</script>
</html>