原生js 的弹出层内含窗口居中

原文地址,http://wenku.baidu.com/view/b7821af27c1cfad6195fa76a.html 

原来版本有2个小bug,目前已改,代码如下

<!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>

 

你可能感兴趣的:(窗口居中)