div效果很好的遮盖层效果

[html] view
plaincopyprint?

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. document.getElementById("show").style.display ="block";
9. }
10. function hidediv() {
11. document.getElementById("bg").style.display ='none';
12. document.getElementById("show").style.display ='none';
13. }
14. </script>
15. <style type="text/css">
16. #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
17. #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}
18. </style>
19. </head>
20. <body>
21. <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
22. <div id="bg"></div>
23. <div id="show">测试
24. <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
25. </div>
26. </body>
27. </html>