遮罩效果|div弹出层|模式层
预知效果如何，查看源代码，预览效果：
1
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
2
<
html
>
3
<
head
>
4
<
title
></
title
>
5
<!--
样式
-->
6
<
style
type
="text/css"
>
7
/*
div的 position 为 absolute 就都取绝对定位，所有的div就会叠在一起
*/
8
/*
页面加载的时候遮罩div 和 消息 div 不显示，点击显示后再显示
*/
9
/*
由于用第二个div来挡住页面所以第二个div的宽度和高度都是100%
*/
10
#divMain
11
{
12
width
:
1024px
;
13
height
:
600px
;
14
margin
:
0 auto
;
15
padding
:
20px
;
16
background-color
:
#ccc
;
17
z-index
:
1
;
//设置div层所处的位置
18
position
:
absolute
;
19
}
20
#divLayer
21
{
22
width
:
100%
;
23
height
:
100%
;
24
background-color
:
#eee
;
25
filter
:
alpha(opacity=30)
;
/*
设置半透明效果
*/
26
opacity
:
0.3
;
/*
透明度
*/
27
z-index
:
2
;
/*
设置div层所处的位置
*/
28
position
:
absolute
;
29
display
:
none
;
30
cursor
:
not-allowed
;
31
}
32
#divMsg
33
{
34
margin-top
:
10%
;
35
width
:
240px
;
36
height
:
100px
;
37
line-height
:
10px
;
38
text-align
:
center
;
39
margin-left
:
40%
;
40
position
:
absolute
;
41
display
:
none
;
42
background-color
:
white
;
43
border
:
2px solid yellow
;
44
z-index
:
3
;
/*
设置div层所处的位置
*/
45
}
46
.btn
47
{
48
border
:
4px solid yellow
;
49
font-family
:
微软雅黑
;
50
font-size
:
12px
;
51
}
52
</
style
>
53
54
<!--
控制脚本
-->
55
<
script
language
="javascript"
>
56
function
showMsg(){
57
/*
得到遮罩div && 消息div
*/
58
var
_divLayer
=
document.getElementById(
"
divLayer
"
);
59
var
_divMsg
=
document.getElementById(
"
divMsg
"
);
60
_divLayer.style.display
=
"
block
"
;
61
_divMsg.style.display
=
"
block
"
;
62
}
63
function
logout(){
64
var
_divLayer
=
document.getElementById(
"
divLayer
"
);
65
var
_divMsg
=
document.getElementById(
"
divMsg
"
);
66
_divLayer.style.display
=
"
none
"
;
67
_divMsg.style.display
=
"
none
"
;
68
alert(
"
login successfull!
"
);
69
}
70
</
script
>
71
</
head
>
72
<
body
>
73
74
75
<!--
遮罩用的div
-->
76
<
div
id
="divLayer"
>
77
78
</
div
>
79
80
<!--
消息div
-->
81
<
div
id
="divMsg"
>
82
<
div
style
="margin-top:7px;"
>
username:
<
input
type
="text"
id
="userName"
maxLength
="16"
/></
div
>
83
<
div
style
="margin-top:6px;"
>
userpass:
<
input
type
="password"
id
="userPass"
maxLength
="16"
/></
div
>
84
<
div
style
="margin-top:8px;"
>
85
<
input
type
="button"
value
="login"
onclick
="logout();"
/>
86
<
input
type
="button"
value
="exit"
onclick
="logout();"
/>
87
</
div
>
88
</
div
>
89
<!--
正常的div
-->
90
<
div
id
="divMain"
>
91
<
input
type
="button"
value
=" 登 录 "
id
="btnLogin"
class
="btn"
onclick
="showMsg();"
/>
92
</
div
>
93
</
body
>
94
</
html
>