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