<div class="codetitle"> <span><a style="CURSOR: pointer" data="39268" class="copybut" id="copybut39268" onclick="doCopy('code39268')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code39268"> <br> <br> <br> <br><title> New Document </title> <br><meta charset="UTF-8"> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><meta name="Author" content=""> <br><meta name="Keywords" content=""> <br><meta name="Description" content=""> <br><style type="text/css"> <BR>* <BR>{ <BR>padding:0px; <BR>margin:0px; <BR>} <BR>#Idiv <BR>{ <BR>width:900px; <BR>height:auto; <BR>position:absolute; <BR>z-index:1000; <BR>border:2px solid #ffffff; <BR>background:#ffffff; <BR>} <BR></style> <br><br> <br> <br><br><div id="Idiv" style="display:none;"> <br><a href="javascript:void(0)" onclick="closeDiv()">点击关闭层</a> <br><br>document.documentElement 的区别<br>document.documentElement 的区别 <br> </div> <br><div><a href="javascript:void(0)" id="show" onclick="show()">点击打开弹出层！</a></div> <br> <br><script langue="javascript"> <br><br>function show() <BR>{ <BR>var Idiv=document.getElementById("Idiv"); <BR>Idiv.style.display="block"; <BR>//以下部分要将弹出层居中显示 <BR>Idiv.style.left=(document.documentElement.clientWidth-Idiv.clientWidth)/2+document.documentElement.scrollLeft+"px"; <BR>//alert(document.body.scrollTop) <BR>var aa_scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; <BR>Idiv.style.top=(document.documentElement.clientHeight-Idiv.clientHeight)/2+aa_scrollTop+"px"; <BR>//此处出现问题，弹出层左右居中，但是高度却不居中，显示在上部分，导致一 //部分不可见,于是暂时在下面添加margin-top <br><br><BR>//以下部分使整个页面至灰不可点击 <BR>var procbg = document.createElement("div"); //首先创建一个div <BR>procbg.setAttribute("id","mybg"); //定义该div的id <BR>procbg.style.background ="#000000"; <BR>procbg.style.width ="100%"; <BR>procbg.style.height ="100%"; <BR>procbg.style.position ="fixed"; <BR>procbg.style.top ="0"; <BR>procbg.style.left ="0"; <BR>procbg.style.zIndex ="500"; <BR>procbg.style.opacity ="0.6"; <BR>procbg.style.filter ="Alpha(opacity=70)"; <BR>//取消滚动条 <BR>document.body.appendChild(procbg); <BR>document.body.style.overflow ="auto"; <br><br>//以下部分实现弹出层的拖拽效果(如果想要弹出层内的div移动,把以下注销去掉即可) <BR>/* <BR>var posX; <BR>var posY; <BR>Idiv.onmousedown=function(e) <BR>{ <BR>if(!e) e = window.event; //IE <BR>posX = e.clientX - parseInt(Idiv.style.left); <BR>posY = e.clientY - parseInt(Idiv.style.top); <BR>document.onmousemove = mousemove; <BR>} <BR>document.onmouseup =function() <BR>{ <BR>document.onmousemove =null; <BR>} <BR>function mousemove(ev) <BR>{ <BR>if(ev==null) ev = window.event;//IE <BR>Idiv.style.left = (ev.clientX - posX) +"px"; <BR>Idiv.style.top = (ev.clientY - posY) +"px"; <BR>}*/ <br><br>} <BR>function closeDiv() //关闭弹出层 <BR>{ <br><br>var Idiv=document.getElementById("Idiv"); <BR>var mybg = document.getElementById("mybg"); <BR>document.body.removeChild(mybg); <BR>Idiv.style.display="none"; <BR>document.body.style.overflow ="auto";//恢复页面滚动条 <BR>//document.getElementById("mybg").style.display="none"; <BR>} <BR></script> <br> <br>//改变上面的弹出层，做自己的一个loading加载的功能。判断页面是否加载完毕，完毕后隐藏loading.gif <br><br> <br> <br> <br><title>New Document </title> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br> <br> <br><br><br> <br><script type="text/ecmascript"> <BR>function show(addressImg, img_w, img_h) { <BR>//得到页面高度 <BR>var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; <BR>//得到页面宽度 <BR>var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth; <BR>var procbg = document.createElement("div"); //首先创建一个div <BR>procbg.setAttribute("id", "mybg"); //定义该div的id <BR>procbg.style.background = "#555"; <BR>procbg.style.width = "100%"; <BR>procbg.style.height = "100%"; <BR>procbg.style.position = "fixed"; <BR>procbg.style.top = "0"; <BR>procbg.style.left = "0"; <BR>procbg.style.zIndex = "500"; <BR>procbg.style.opacity = "0.6"; <BR>procbg.style.filter = "Alpha(opacity=70)"; <BR>//取消滚动条 <BR>document.body.appendChild(procbg); <BR>document.body.style.overflow = "auto"; <br><br><BR>var pimg = document.createElement("img"); //创建一个img <BR>pimg.setAttribute("id", "bg_img"); //定义该div的id <BR>pimg.setAttribute("src", addressImg); //定义该div的id <BR>var img_w = (w - img_w) / 2; <BR>var img_h = (h - img_h) / 2; <BR>pimg.style.top = img_h + "px"; <BR>pimg.style.left = img_w + "px"; <BR>pimg.style.position = "fixed"; <BR>pimg.style.opacity = "0.9"; <BR>document.getElementById("mybg").appendChild(pimg); <BR>} <BR>function closeDiv() //关闭弹出层 <BR>{ <BR>var mybg = document.getElementById("mybg"); <BR>document.body.removeChild(mybg); <BR>document.body.style.overflow = "auto";//恢复页面滚动条 <BR>//document.getElementById("mybg").style.display="none"; <BR>} <BR>show('loading/loading3.gif', '100', '100'); <BR>document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. <BR>function subSomething() { <BR>if (document.readyState == "complete") { //当页面加载状态为完全结束时进入 <BR>closeDiv(); <BR>} <BR>} <BR></script> <br> <br> </div>
