生活随笔
收集整理的這篇文章主要介紹了
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">網頁設計大本營歡迎你！<br/>Q群號:26868887<br/>
73 <a href="javascript:closeDiv()">關閉窗口</a>
74 </div>
75
76 <div id="bg" class="bg">5555555555</div>
77 <div>
78 <pre> 春江花月夜
79 唐 張若虛
80
81 春江潮水連海平，海上明月共潮生。
82
83 滟滟隨波千萬里，何處春江無月明？
84 </pre>
85 <p><br />
86
87
88 </p>
89 <div><a href="javascript:showDiv()">點我,彈出層</a></div>
90
91 </body>
92 </html>
總結
以上是生活随笔為你收集整理的html弹窗半透明的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
