遮罩层

利用div实现遮罩层效果就是利用一个全屏、半透明的div遮住页面上其它元素，典型的例子就是百度的登录界面。下面贴出示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>全屏div</title>
 6 <style>
 7 html,body {
 8     margin:0;
 9     height:100%;
10 }
11 #test {
12     width:100%;
13     height:100%;
14     background-color:#000;
15     position:absolute;
16     top:0;
17     left:0;
18     z-index:2;
19     opacity:0.3;
20     /*兼容IE8及以下版本浏览器*/
21     filter: alpha(opacity=30);
22     display:none;
23 }
24 
25 #log_window {
26     width:200px;
27     height:200px;
28     background-color:#FF0;    
29     margin: auto;
30     position: absolute;
31     z-index:3;
32     top: 0;
33     bottom: 0;
34     left: 0;
35     right: 0;
36     display:none;
37 }
38 </style>
39 <script>
40 function shield(){
41     var s = document.getElementById("test");
42     s.style.display = "block";
43     
44     var l = document.getElementById("log_window");
45     l.style.display = "block";
46 }
47 
48 function cancel_shield(){
49     var s = document.getElementById("test");
50     s.style.display = "none";
51     
52     var l = document.getElementById("log_window");
53     l.style.display = "none";
54 }
55 </script>
56 </head>
57 
58 <body>
59 <a href="javascript:shield()">打开遮罩</a>
60 <div id="test"></div>
61 <div id="log_window">
62 <a href="javascript:cancel_shield()">关闭</a>
63 </div>
64 </body>
65 </html>

demo

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>金融平台招商导航网后台</title>
  6 <link href="/css/reset_1.css" type="text/css" rel="stylesheet" />
  7 
  8 <link href="/css/style_1.css" type="text/css" rel="stylesheet" />
  9 
 10 <link href="/css/view.css" type="text/css" rel="stylesheet" />
 11 <link href="/css/shake.css" rel="stylesheet" media="all">  <!-- left图片抖动 -->
 12 
 13 <script src="/js/common_1.js"></script>
 14 
 15 <script type="text/javascript" src="/js/jquery.js"></script>
 16 <style>
 17 html,body {
 18     margin:0;
 19     height:100%;
 20 }
 21 #test {
 22     width:100%;
 23     height:100%;
 24     background-color:#000;
 25     position:fixed;
 26     top:0;
 27     left:0;
 28     z-index:2;
 29     opacity:0.3;
 30     /*兼容IE8及以下版本浏览器*/
 31     filter: alpha(opacity=30);
 32     display:none;
 33 }
 34 
 35 #log_window {
 36     width:600px;
 37     height:400px;
 38     background-color:#fff;    
 39     margin: auto;
 40     position: fixed;
 41     z-index:3;
 42     top: 0;
 43     bottom: 0;
 44     left: 0;
 45     right: 0;
 46     display:none;
 47 }
 48 .gb{
 49     text-align: right;
 50     padding: 10px;
 51 }
 52 </style>
 53 <script>
 54 function upd(id,title){
 55     document.getElementById("id").value = id;
 56     document.getElementById("container").value = title;
 57     var s = document.getElementById("test");
 58     s.style.display = "block";
 59     
 60     var l = document.getElementById("log_window");
 61     l.style.display = "block";
 62 }
 63 
 64 function close(){
 65     var s = document.getElementById("test");
 66     s.style.display = "none";
 67     
 68     var l = document.getElementById("log_window");
 69     l.style.display = "none";
 70 }
 71 
 72 function checkcomment(){
 73   // var mob = document.getElementById('checkcode').value;
 74     // var company = $('#company_name').html();
 75     // var a = document.getElementById('mes_company').value=company;
 76 
 77   if(document.comment.content.value=="" || document.comment.content.value.replace(/s/g,'')==''){
 78     alert('请输入评论内容！');
 79     document.comment.content.focus();
 80     return false;
 81   }
 82  
 83 }
 84 
 85 </script>
 86 </head>
 87 
 88 <body>
 89 <!-- <a href="javascript:shield()">打开遮罩</a> -->
 90 <div id="test"></div>
 91 <div id="log_window">
 92     <div class="gb"><a href="javascript:close()">关闭</a></div>
 93     <form name="comment" action=" " method="post" onsubmit="return checkcomment();" style="margin:0" >
 94         <div style="580px;padding-left:10px;">
 95             <textarea name="content" cols="" class="comment_input" rows="" id="container" style='resize:none;' value=""></textarea>
 96             <div class="clearfix comment_login">
 97                 <span class="left" style="display:none;">ID：<input name='id'  type='text' id='id' value="0"  style="height:17px; line-height:17px; padding:5px;" /></span>
 98                 <!-- <span class="left">手机号：<input name='checkcode'  type=text id='checkcode' size="11" maxlength="11" style="height:17px; line-height:17px; padding:5px;" /></span> -->
 99                 <!-- <span class="left" style="display:none;">公司：<input name='mes_company'  type=text id='mes_company'  value="" style="height:17px; line-height:17px; padding:5px;" /></span> -->
100 
101                 <span class="center"><input name="" value="提 交" type="submit" class="pingbut" />
102 
103                 <span id="checkshop"> (注意：仅限300汉字)</span></span>
104 
105             </div>
106         </div>
107 
108 
109     </form>
110 </div>
111 </body>
112 </html>

View Code