曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html
我想实现的效果没有上面那么多,仅仅出现一个灰蒙蒙的div层就可以了,所以做了一些改动.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>DIV CSS遮罩层</title> 5 <script language="javascript" type="text/javascript"> 6 function showdiv() { 7 document.getElementById("bg").style.display = "block"; 8 } 9 function hidediv() { 10 document.getElementById("bg").style.display = 'none'; 11 } 12 </script> 13 <style type="text/css"> 14 #bg{ display: none; 15 position: absolute; 16 top: 10%; 17 left: 10%; 18 width: 80%; 19 height: 80%; 20 background-color: grey; 21 z-index:1; 22 -moz-opacity: 0.7; /*不知道有啥用*/ 23 opacity:0.70; /*不知道有啥用*/ 24 filter: alpha(opacity=10); /*这个是真正起作用的*/ 25 } 26 </style> 27 </head> 28 <body> 29 <input id="btnshow" type="button" value="Show" onclick="showdiv();"/><br/><br/> 30 <input id="btnclose" type="button" value="Close" onclick="hidediv();"/> 31 <div id="bg"></div> 32 </body> 33 </html>