原生js 的弹出层内含窗口居中代码,Js代码库,德仔网

代码语言
代码分类
【Js】原生js 的弹出层内含窗口居中
作者: / 发布于2016/10/11/ 854
<!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()">点击关闭层</a>
            <br/>document.documentElement 的区别<br/>document.documentElement 的区别
     </div>
     <div><a href="javascript:void(0)" id="show" onclick="show()">点击打开弹出层！</div>
 </body>
 <script langue="javascript">
 
  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"; 
 }
 
 </script>
</HTML>




//改变上面的弹出层，做自己的一个loading加载的功能。判断页面是否加载完毕，完毕后隐藏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) {
        //得到页面高度
        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();
        }
    }
</script>
</html>
试试其它关键字
同语言下
可能有用的
贡献的其它代码Label