IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

JS弹出窗口 父窗口变灰

作者:longvs  发布日期:2013-10-30 20:25:38
  • 收藏本文    我要投稿
  • <!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>  

     

Tag标签:JS  弹出窗口  父窗口变灰    
  • 专题推荐