原生js的弹出层且其内的窗口居中_javascript技巧

复制代码 代码如下: 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"; //以下部分要将弹出层居中显示 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"; //此处出现问题，弹出层左右居中，但是高度却不居中，显示在上部分，导致一 //部分不可见,于是暂时在下面添加margin-top //以下部分使整个页面至灰不可点击 var procbg = document.createElement("div"); //首先创建一个div procbg.setAttribute("id","mybg"); //定义该div的id 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)"; //取消滚动条 document.body.appendChild(procbg); document.body.style.overflow ="auto"; //以下部分实现弹出层的拖拽效果(如果想要弹出层内的div移动,把以下注销去掉即可) /* 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() //关闭弹出层 { var Idiv=document.getElementById("Idiv"); var mybg = document.getElementById("mybg"); document.body.removeChild(mybg); Idiv.style.display="none"; document.body.style.overflow ="auto";//恢复页面滚动条 //document.getElementById("mybg").style.display="none"; } //改变上面的弹出层，做自己的一个loading加载的功能。判断页面是否加载完毕，完毕后隐藏loading.gif New Document function show(addressImg, img_w, img_h) { //得到页面高度 var h = (document.documentElement.scrollHeight > document.documentElement.clientHeight) ? document.documentElement.scrollHeight : document.documentElement.clientHeight; //得到页面宽度 var w = (document.documentElement.scrollWidth > document.documentElement.clientWidth) ? document.documentElement.scrollWidth : document.documentElement.scrollWidth; var procbg = document.createElement("div"); //首先创建一个div procbg.setAttribute("id", "mybg"); //定义该div的id 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)"; //取消滚动条 document.body.appendChild(procbg); document.body.style.overflow = "auto"; var pimg = document.createElement("img"); //创建一个img pimg.setAttribute("id", "bg_img"); //定义该div的id pimg.setAttribute("src", addressImg); //定义该div的id 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() //关闭弹出层 { var mybg = document.getElementById("mybg"); document.body.removeChild(mybg); document.body.style.overflow = "auto";//恢复页面滚动条 //document.getElementById("mybg").style.display="none"; } show('loading/loading3.gif', '100', '100'); document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if (document.readyState == "complete") { //当页面加载状态为完全结束时进入 closeDiv(); } }

原生js的弹出层且其内的窗口居中_javascript技巧

Artikel berkaitan