JS弹出窗口,父窗口变灰

来源:互联网 发布:淘宝小二商家客服电话 编辑:程序博客网 时间:2024/05/05 06:42
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>    <head>               <title>弹出层</title>      <meta http-equiv="pragma" content="no-cache">      <meta http-equiv="cache-control" content="no-cache">      <meta http-equiv="expires" content="0">          <meta http-equiv="description" content="This is my page">      <style>           .myd{              background: #77887E ;              height: 100%;              left: 0%;              right: 0%;              width: 100%;              position: absolute;              z-index: 10000;          }                     .pd{              background: #c2ee11 ;              height: 300px;              width: 450px;              position: absolute;              z-index: 10002;          }      </style>           </head>        <script type="text/javascript">      //var ie_name = navigator.appName;         function pop(){          var b = document.body;                                    //设置边距为0,是为了全屏遮盖,否则上、右两边会留有边距,不能全屏遮盖          b.style.margin=0;          document.getElementById("md").style.display="block";                    //实现透明遮盖,如果不需要透明,不需要设置此属性          document.getElementById("md").style.filter="alpha(opacity=80)";                    //clientWidth取的是实际窗口文档域的大小          var _x = document.body.clientWidth;          var _y = document.body.clientHeight;          var a_w = 450;          var a_h = 300;          //alert(_x+" == " + _y);          //计算弹出层的位置,目的是要显示在正中间          var dleft = _x/2 - a_w/2;          var dtop = _y/2 - a_h/2;          //alert(dleft+" == "+dtop);          var cd = document.getElementById("pd").style;          //cd.setAttribute("left",dleft+"px");          //cd.setAttribute("top",dtop+"px");          cd.left=dleft+"px";          cd.top = dtop+"px";          cd.display="block"; }            function close_div(){          document.body.style.margin="";          document.getElementById("md").style.display="none";          document.getElementById("pd").style.display="none";      }  </script>        <body>     <!-- 遮盖层 -->    <div class="myd" style="display: none" id="md"></div>        <!-- 弹出层 -->    <div class="pd" style="display: none" id="pd">      <div style="height: 20px;background: red;width: 100%;text-align: right">          点击关闭层:<button onclick="close_div()">X</button>      </div>      <label>这里是要显示的内容</label>          </div>        <div style="margin-top:100px;margin-left:100px;"> <input type="button" onclick="pop()" value="弹出层">  <br> </div>  </body>  </html>  


 

原创粉丝点击