弹出一个全屏灰黑色透明遮罩效果

快乐打工仔 分类:实例代码

弹出一个全屏灰黑色透明遮罩效果属于前端实例代码,有关更多实例代码大家可以查看

众多网站有类似效果,进行一定的操作之后,弹出一个灰黑色的半透明的遮罩。

例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果。

代码实例如下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.pipipi.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属性值。

弹出一个全屏灰黑色透明遮罩效果,这样的场景在实际项目中还是用的比较多的,关于弹出一个全屏灰黑色透明遮罩效果就介绍到这了。

回复

我来回复
  • 暂无回复内容