JS+CSS简单实现DIV遮罩层显示隐藏

http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html

JS+CSS简单实现DIV遮罩层显示隐藏

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 < 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大。