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

Lixh1986

浏览: 1112856 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

javaScript

窗口屏蔽遮罩覆盖 js


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

查看图片附件

分享到：

win7 屏蔽全角/半角快捷键(Shift+Space) | 技术学习视频

2014-09-04 09:11
浏览 985
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

Javascript 测试框架之 隐式声明 之 describe

JavaScript之ECMAScript6新特性之_03_箭头函数（Arrow Function）

JavaScript之ECMAScript6新特性之_02_线程异步阻塞: Promise, Async / await

JavaScript之ECMAScript6新特性之_01_开篇

jQuery Versions - browser support

基于HTML5实现的中国象棋游戏

JavaScript之跨域请求解决方案

JavaScript之 25 道面试题

JavaScript小应用之分页算法

jQuery之empty() VS. remove()

jQuery之 prop() VS. attr()

jQuery之mouseover,mouseover,mouseout,mouseleave

javascript之JS操作iframe

javascript之面向对象编程之原型继承

HTML5之Cookie,localStorage 与 sessionStorage

jquery之live(), delegate(), on() 方法

javascript之小应用：网页在线聊天

javascript之编程序题目

javascript之面向对象编程之属性继承

javascript 之 undefined

最近访客更多访客>>

Javascript 测试框架之隐式声明之 describe