js中弹出一个新窗口后屏蔽其他窗口

程序员文章站 2022-05-29 21:36:24

...


<html>
<head>

<style type="text/css">
 #mask {
  position:absolute;
  top:0;
  left:0;
  background-color:#000;
  filter:alpha(opacity=20);
  -moz-opacity:0.2;
  -khtml-opacity: 0.2;
  opacity: 0.2;
  z-index : 1000;
  width: 1000px;
  height:400px;
  display : none;
 }
 
 span.btn{ 
   color:red; 
   background-color:#eee; 
   border: 1px solid green;
   padding : 3px 5px;
   border-radius: 5px;
 }
 
 #hide_mask{
    width: 600px;
    height: 120px;
    margin:auto;
    font-size : 22px;
    font-weight: bold;
    color: red;
    border: 2px solid #FFa;
    line-height : 120px;
    padding: 0 50 0 50;
    border-radius: 25px;
    background-color: green;
 }
 
 #top_bar{
    width: 100px;
    height: 150px;
    
 }

</style>

<script type="text/javascript">

 window.onload = function(){
 
    var fn_show_mask = function (){
        var body_width = document.body.offsetWidth;
        var body_height = document.body.offsetHeight;
        
        var mask = document.getElementById("mask"); 
        mask.style.width = body_width + "px";
        mask.style.height = body_height + "px";        
        mask.style.display = "block";
        
       
        
        
    }
 
    //get sumbit button.
    var submit_button = document.getElementById("submit_button");  
    // set onclick event method.
    submit_button.onclick = fn_show_mask;
    
    
    // get mask element.
    var hide_mask = document.getElementById("hide_mask"); 
    // set onclick event method.
    hide_mask.onclick = function(e,i){
        this.parentNode.style.display = "none";
    }
    
    //get span
    var span_click ;
    
    if(document.getElementsByClassName){
        span_click = document.getElementsByClassName("btn")[0];
    }else{
        span_click = document.getElementById("span_click");
    }  
    
    // set onclick event method.
    span_click.onclick = fn_show_mask;
    
    

 
 }

 
 

</script>

</head>
<body>

<div id="mask">
    <div id="top_bar"></div>
    <div id="hide_mask"> Click Me To Hide</div>
</div>



<div style="width:600px;margin:auto;padding-top:50px;">
    
    <h4>点击 <span class="btn" id="span_click">Click Me</span>，出现遮罩层。</h4>
    <form>
        <table>
         <tr>
            <td>标题：</td>
            <td>
                <input type="text" id="title" name="title" style="width:400px;"/>
            </td>
         </tr>
        
         <tr>
            <td>内容：</td>
            <td>
               <textarea rows="20" cols="54"></textarea>

            </td>
         </tr>
         
          <tr>
            <td></td>
            <td>
                <input type="button" id="submit_button" value="Click Me"/>
            </td>
         </tr>
         
          <tr>
            <td></td>
            <td></td>
         </tr>
        </table>
    </form>
      <hr>
      -- design by <a href="http://www.nodebook.info" target="_blank">Eddy</a>

    </div>
    
  
    
   
</body>
</html>