彈出一個全屏灰黑色透明遮罩效果

admin發表於2017-12-04
遮罩

眾多網站有類似效果，進行一定的操作之後，彈出一個灰黑色的半透明的遮罩。

例如可以彈出一個登陸框之類的內容，下面就介紹一下如何實現此種效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<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屬性值。

相關文章