點選彈出半透明層程式碼例項

antzone發表於2017-03-22

本章節將通過程式碼例項詳細介紹一下如何點選彈出一個半透明層效果，這樣的效果在很多應用中都有使用。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>

以上程式碼實現了我們的要求，下面簡單介紹一下實現過程。

一.實現原理:

在預設狀態下彈出視窗是隱藏的，程式碼如下:

[CSS] 純文字檢視 複製程式碼
.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;
}

彈出層採用絕對定位，同時寬度是width:50%，為了讓其在視覺上大體居中，將其left屬性值設定為25%，因為彈出層具有padding和border，所以不是真正的水平居中，如果不考慮相容性問題的話可以使用cal()使其居中，可以參閱CSS3 calc()一章節。

當點選按鈕的時候，就會觸發onclick事件，事件處理函式能夠將彈出層和般透明層設定為顯示狀態。

設定透明效果使用如下程式碼:

[CSS] 純文字檢視 複製程式碼
-moz-opacity:0.8;
opacity:0.8;
filter:alpha(opacity=80);

opacity:0.8是標準瀏覽器中的寫法，-moz-opacity:0.8為了相容低版本的火狐，其實完全可以省略，filter:alpha(opacity=80)為了相容IE8和IE8以下瀏覽器。

相關文章