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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值