html弹窗半透明

 1 <html xmlns="http://www.w3.org/1999/xhtml"> 
 2 <head> 
 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 4 <title>web设计大本营</title> 
 5 <style type="text/css"> 
 6 <!-- 
 7 html,body {height:100%; margin:0px; font-size:12px;} 
 8 
 9 .mydiv { 
10 background-color: #FFCC66; 
11 border: 1px solid #f00; 
12 text-align: center; 
13 line-height: 40px; 
14 font-size: 12px; 
15 font-weight: bold; 
16 z-index:99; 
17 width: 300px; 
18 height: 120px; 
19 left:50%;/*FF IE7*/ 
20 top:50%;/*FF IE7*/ 
21 
22 margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */ 
23 margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ 
24 
25 margin-top:0px; 
26 
27 position:fixed!important;/*FF IE7*/ 
28 position:absolute;/*IE6*/ 
29 
30 _top:       expression(eval(document.compatMode && 
31             document.compatMode=='CSS1Compat') ? 
32             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 
33             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 
34 
35 } 
36 .bg { 
37 background-color: #666; 
38 width: 100%; 
39 height: 100%; 
40 left:0; 
41 top:0;/*FF IE7*/ 
42 filter:alpha(opacity=50);/*IE*/ /*点击后背景透明效果*/ 
43 opacity:0.5;/*FF*/ 
44 z-index:1; 
45 
46 position:fixed!important;/*FF IE7，this line code is extremely important*/ 
47 position:absolute;/*IE6*/ 
48 
49 _top:       expression(eval(document.compatMode && 
50             document.compatMode=='CSS1Compat') ? 
51             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ 
52             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 
53 
54 } 
55 --> 
56 </style> 
57 <script language="javascript" type="text/javascript"> 
58 function showDiv(){ 
59 　　document.getElementById('popDiv').style.display='block'; 
60 　　document.getElementById('bg').style.display='block'; 
61 } 
62 
63 function closeDiv(){ 
64 　　document.getElementById('popDiv').style.display='none'; 
65 　　document.getElementById('bg').style.display='none'; 
66 } 
67 
68 </script> 
69 </head> 
70 <body> 
71 
72 <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你！<br/>Q群号:26868887<br/> 
73 <a href="javascript:closeDiv()">关闭窗口</a>
74 </div> 
75 
76 <div id="bg" class="bg" style="display:none;">5555555555</div> 
77 <div> 
78    <pre>      春江花月夜 
79         唐 张若虚 
80    
81     春江潮水连海平，海上明月共潮生。 
82 
83     滟滟随波千万里，何处春江无月明？ 
84     </pre> 
85 <p><br /> 
86    
87    
88 </p> 
89 <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div> 
90 
91 </body> 
92 </html>