學習了CSS，制作了一個居中的半透明彈出層，運用了DIV css+Javascript技術，在點擊了相應的文字後，就彈出了這個半透明的Div層，並且在不需要時可關閉，暫時不支持拖動功能，有興趣的網友可自己完善添加功能。代碼共分為三個部發，CSS部分、Div層代碼部分、JavaScript控制部分，完整的代碼如下。
01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02
<
Html
XMLns
=
"http://www.w3.org/1999/xhtml"
>
03
head
04
meta
http-equiv
"Content-Type"
content
"text/Html; charset=gb2312"
/>
05
title
>DivCSS實現居中的半透明彈出層</
06
style
type
"text/CSS"
07
<!--
08
Html,body {height:100%; margin:0px; font-size:12px;}
09
.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:999;
17
width: 300px;
18
height: 120px;
19
left:50%;
20
top:50%;
21
margin-left:-150px!important;/*FF IE7 該值為本身寬的一半 */
22
margin-top:-60px!important;/*FF IE7 該值為本身高的一半*/
23
margin-top:0px;
24
position:fixed!important;/* FF IE7*/
25
position:absolute;/*IE6*/
26
_top: expression(eval(document.compatMode &&
27
document.compatMode=='CSS1Compat') ?
28
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
29
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
30
}
31
.bg,.popIframe {
32
background-color: #666; display:none;
33
width: 100%;
34
height: 100%;
35
left:0;
36
top:0;/*FF IE7*/
37
filter:alpha(opacity=50);/*IE*/
38
opacity:0.5;/*FF*/
39
z-index:1;
40
position:fixed!important;/*FF IE7*/
41
42
43
44
45
document.body.scrollTop + (document.body.clientHeight - this.clIEntHeight)/2);
46
47
.popIframe {
48
filter:alpha(opacity=0);/*IE*/
49
opacity:0;/*FF*/
50
51
-->
52
</
53
script
language
"Javascript"
"text/Javascript"
54
function showDiv(){
55
document.getElementById('popDiv').style.display='block';
56
document.getElementById('popIframe').style.display='block';
57
document.getElementById('bg').style.display='block';
58
59
function closeDiv(){
60
document.getElementById('popDiv').style.display='none';
61
document.getElementById('bg').style.display='none';
62
document.getElementById('popIframe').style.display='none';
63
64
65
66
body
67
div
id
"popDiv"
class
"mydiv"
"display:none;"
>CSS教程歡迎你！
68
歡迎來到源碼愛好者網站。
69
a
href
"Javascript:closeDiv()"
>關閉窗口</
></
70
"bg"
71
"Javascript:showDiv()"
>點擊這裡彈出層</
72
iframe
'popIframe'
frameborder
'0'
73
74