DIV遮罩层的显示隐藏

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