<!
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
<
title
>
DIV CSS遮罩层
</
title
>
5
<
script
language
="javascript"
type
="text/javascript"
>
6
function
showdiv() {
7
document.getElementById(
"
bg
"
).style.display
=
"
block
"
;
8
document.getElementById(
"
show
"
).style.display
=
"
block
"
;
9
}
10
function
hidediv() {
11
document.getElementById(
"
bg
"
).style.display
=
'
none
'
;
12
document.getElementById(
"
show
"
).style.display
=
'
none
'
;
13
}
14
</
script
>
15
<
style
type
="text/css"
>
16
#bg
{
display
:
none
;
position
:
absolute
;
top
:
0%
;
left
:
0%
;
width
:
100%
;
height
:
100%
;
background-color
:
black
;
z-index
:
1001
;
-moz-opacity
:
0.7
;
opacity
:
.70
;
filter
:
alpha(opacity=70)
;
}
17
#show
{
display
:
none
;
position
:
absolute
;
top
:
25%
;
left
:
22%
;
width
:
53%
;
height
:
49%
;
padding
:
8px
;
border
:
8px solid #E8E9F7
;
background-color
:
white
;
z-index
:
1002
;
overflow
:
auto
;
}
18
</
style
>
19
</
head
>
20
<
body
>
21
<
input
id
="btnshow"
type
="button"
value
="Show"
onclick
="showdiv();"
/>
22
<
div
id
="bg"
></
div
>
23
<
div
id
="show"
>
测试
24
<
input
id
="btnclose"
type
="button"
value
="Close"
onclick
="hidediv();"
/>
25
</
div
>
26
</
body
>
27
</
html
>
Copy上面的代码到HTML页面即可查看效果。
原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display='block' or display='none'.就可以实现DIV的显示和隐藏。
注意两个DIV的z-index，显示在最上面的DIV的z-index一定要比遮罩层的z-index大。
转载请注明原文地址: https://ju.6miu.com/read-1311664.html
