点击弹出居中带有透明遮罩层窗口:

本章节介绍一下如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果，此效果在当下比较流行，当然还有更为复杂的实现方式，当然效果也更为绚丽，下面介绍的代码能够简单实现此效果。

点击弹出居中带有透明遮罩层窗口:
本章节介绍一下如何点击一个按钮实现弹出一个居中窗口，并且此窗口带有半透明的遮罩层效果，此效果在当下比较流行，当然还有更为复杂的实现方式，当然效果也更为绚丽，下面介绍的代码能够简单实现此效果。
代码如下:

 <!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
#fade { 
  display:none; 
  position:absolute; 
  top:0%; 
  left:0%; 
  width:100%; 
  height:100%; 
  background-color:black; 
  z-index:1001; 
  -moz-opacity:0.8; 
  opacity:.80; 
  filter:alpha(opacity=80); 
} 
#light{ 
  display:none; 
  position:absolute; 
  top:25%; 
  left:25%; 
  width:50%; 
  height:50%; 
  padding:16px; 
  border:3px solid orange; 
  background-color:white; 
  z-index:1002; 
  overflow:auto; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
   var linkbt=document.getElementById("linkbt"); 
   var light=document.getElementById('light'); 
   var fade=document.getElementById('fade'); 
   var closebt=document.getElementById("closebt"); 
   linkbt.onclick=function(){ 
     light.style.display='block'; 
     fade.style.display='block'; 
   } 
   closebt.onclick=function(){ 
     light.style.display='none'; 
     fade.style.display='none'; 
   } 
} 
</script> 
</head> 
<body> 
<a href="javascript:void(0)" id="linkbt"> 点击这里打开窗口</a> 
<div id="light"><a href="javascript:void(0)" id="closebt">关闭窗口</a></div> 
<div id="fade""></div> 
</body> 
</html>

以上代码实现了我们的要求，下面简单介绍一下它的实现过程。
一.实现原理:
在默认状态下，遮罩层和窗口都是隐藏不可见的，当点击链接之后，能够使窗口和遮罩层显示，并且将遮罩层设置为半透明状态。此两个元素都采用绝对定位同时设置居中窗口的z-index属性值大于遮罩层，这样就可以使其覆盖在遮罩层之上。当点击关闭按钮的时候，能够将遮罩层和窗口隐藏，原理大致如此。

来源：https://www.cnblogs.com/xinziyublog/p/5203259.html

标签

遮罩层