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

忘是亡心i 2022-07-16 08:15 255阅读 0赞

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

# [JS+CSS简单实现DIV遮罩层显示隐藏][JS_CSS_DIV] #

![复制代码][copycode.gif]

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 >

![复制代码][copycode.gif]

Copy上面的代码到HTML页面即可查看效果。

原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display='block' or display='none'.就可以实现DIV的显示和隐藏。

注意两个DIV的z-index，显示在最上面的DIV的z-index一定要比遮罩层的z-index大。

[JS_CSS_DIV]: http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html
[copycode.gif]: /images/20220716/5f19c2147ee24953a14eadc4c790b929.png