一个简单JS+CSS遮罩层的实现

遮罩层代码如下<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="//www.jb51.net/" />  
<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家</title> 
<style type="text/css"> 
* 
{ 
 margin:0px; 
 padding:0px; 
} 
.zhezhao 
{ 
 width:100%; 
 height:100%; 
 background-color:#000; 
 filter:alpha(opacity=50); 
 -moz-opacity:0.5; 
 opacity:0.5; 
 position:absolute; 
 left:0px; 
 top:0px; 
 display:none; 
 z-index:1000; 
} 
.login 
{ 
 width:280px; 
 height:180px; 
 position:absolute; 
 top:200px; 
 left:50%; 
 background-color:#000; 
 margin-left:-140px; 
 display:none; 
 z-index:1500; 
} 
.content 
{ 
 margin-top:50px; 
 color:red; 
 line-height:200px; 
 height:200px; 
 text-align:center; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function() 
{ 
 var zhezhao=document.getElementById("zhezhao"); 
 var login=document.getElementById("login"); 
 var bt=document.getElementById("bt"); 
 var btclose=document.getElementById("btclose"); 
  
 bt.onclick=function() 
 { 
  zhezhao.style.display="block"; 
  login.style.display="block"; 
 } 
 btclose.onclick=function() 
 { 
  zhezhao.style.display="none"; 
  login.style.display="none";  
 } 
} 
</script> 
</head> 
<body> 
  <div class="zhezhao" id="zhezhao"></div> 
  <div class="login" id="login"><button id="btclose">点击关闭</button></div>  
  <div class="content">脚本之家欢迎您，<button id="bt">点击弹出遮罩</button></div> 
</body> 
</html>

以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。下面介绍一下如何实现次效果:

实现原理:

创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

来源：https://www.cnblogs.com/Koaler/p/12011632.html

标签

遮罩层

display