CSS 弹出层支持IE/FF/OP

 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 <meta name="Author" content="lsh710,online.hfut.edu.cn" /> 
 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 6 <title>弹出层</title> 
 7 <style type="text/css"> 
 8 body{ margin:0px; padding:0px;} 
 9 #cover{ position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#000; 
10 filter:alpha(opacity=55);/*对应IE*/ 
11 -moz-opacity: 0.55;/*对应FF*/ 
12 opacity: 0.55;/*对应Opera*/ 
13 display:none; 
14 } 
15 #tb_window{ 
16 width:300px; height:100px; border:2px #C60 solid; position:absolute; top:200px;left:400px;z-index:3; background:#FFF;}
17 
18 #button{ margin:auto; width:300px; margin-top:200px;} 
19 </style>
20 
21 </head>
22 
23 <body> 
24 <br /> 
25 <br /><br /> 
26 <span>我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的我是透明的</span> 
27 <br /><br /> 
28 <div id="cover"> 
29 <div id="tb_window"> 
30 <a href="javascript:hidden()" >关闭</a> 
31 <div id="messages">里面是你要显示的内容！！！</div> 
32 </div> 
33 </div>
34 
35 <div id="button"> 
36 <input type="button" onclick="show('显示1显示1显示1显示1显示1')" value="显示1" />
37 
38 <input type="button" onclick="show('显示222222222222222222')" value="显示2" /> 
39 </div>
40 
41 
42 <script type="text/javascript" language="javascript"> 
43 function show(messges) 
44 { 
45 document.getElementById("messages").innerHTML="<div id='messages'>"+messges+"！！</div>"; 
46 document.getElementById("button").style.display = "none"; 
47 document.getElementById("cover").style.display = "block";
48 
49 } 
50 function hidden() 
51 { 
52 document.getElementById("cover").style.display = "none"; 
53 document.getElementById("button").style.display = "block"; 
54 } 
55 </script> 
56 </body> 
57 </html>
CSS 弹出层 支持IE/FF/OP

CSS 弹出层支持IE/FF/OP
