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

最新推荐文章于 2021-09-09 11:19:19 发布

iteye_3352

最新推荐文章于 2021-09-09 11:19:19 发布

阅读量360

点赞数

分类专栏： javaScript 文章标签：窗口屏蔽遮罩覆盖 js ViewUI

本文链接：https://blog.csdn.net/iteye_3352/article/details/82604067

版权

javaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏



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

[img]http://dl2.iteye.com/upload/attachment/0100/8262/a0f10805-bd00-3297-b9eb-8e36e7c8eac5.jpg[/img]

--

iteye_3352

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中弹出一个新窗口后屏蔽其他窗口

[code="html"] #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-i...
复制链接

扫一扫