JavaScript点击弹出半透明层代码实例

本章节将通过代码实例详细介绍一下如何点击弹出一个半透明层效果，这样的效果在很多应用中都有使用。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style>
*{
  margin:0;
  padding:0
}
html,body{
  height:100%;
  width:100%;
  font-size:12px
}
.white_content{
  display:none;
  position:absolute;
  top:25%;
  left:25%;
  width:50%;
  padding:6px 16px;
  border:12px solid #D6E9F1;
  background-color:white;
  z-index:1002;
  overflow:auto;
}
.black_overlay{
  display:none;
  position:absolute;
  top:0%;
  left:0%;
  width:100%;
  height:100%;
  background-color:#f5f5f5;
  z-index:1001;
  -moz-opacity:0.8;
  opacity:0.8;
  filter:alpha(opacity=80);
}
#close{
  float:right;
  clear:both;
  width:100%;
  text-align:right;
  margin:0 0 6px 0;
  cursor:pointer;
}
.con{
  text-indent:1.5pc;
  line-height:21px
}
</style>
<script> 
function show(tag){ 
  var light=document.getElementById(tag); 
  var fade=document.getElementById('fade'); 
  light.style.display='block'; 
  fade.style.display='block'; 
} 
function hide(tag){ 
  var light=document.getElementById(tag); 
  var fade=document.getElementById('fade'); 
  light.style.display='none'; 
  fade.style.display='none'; 
} 
window.onload=function(){
  var oshowlink=document.getElementById("showlink");
  var oclose=document.getElementById("close");
  oshowlink.onclick=function(){
    show("light");
  }
  oclose.onclick=function(){
    hide("light");
  }
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="showlink">点击弹出窗口</a>
<div id="light" class="white_content">
  <div id="close">关闭</div>
  <div class="con"></div>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

代码描述：JavaScript点击弹出半透明层。JavaScript点击弹出半透明层代码实例

下载全部收藏

158 210

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册