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