點選彈出一個帶有半透明遮罩的居中視窗

螞蟻小編發表於2017-04-14
遮罩

現在比較流行的一種效果就是點選一個地方能夠彈出一個帶有遮罩的居中視窗，當然用處多種多樣的，下面就結合一個例項詳細介紹一下如何實現此效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>點選彈出居中視窗-螞蟻部落</title>
<style type="text/css"> 
.Div_Scroll 
{ 
  position:fixed; 
  margin:-10px; 
  visibility:hidden; 
  background-color:#808080; 
  opacity:0.6; 
  z-index:99; 
} 
.Div_Scroll_Content 
{ 
  position:relative; 
  margin-top:20%; 
  width:inherit; 
  height:inherit; 
} 
.Div_AlertWindow 
{ 
  margin:auto; 
  width:200px; 
  height:100px; 
  background-color:lightblue; 
  border:5px solid #f00; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function ()
{ 
  var alertWindow=$("alertParent"); 
  var Sure=$("Sure");
  var alertButton=$("alertButton");
  alertWindow.style.width=window.screen.availWidth+"px"; 
  alertWindow.style.height=window.screen.height+"px"; 
  Sure.onclick=function()
  { 
    alertWindow.style.visibility="hidden"; 
  } 
  alertButton.onclick=ShowAlert;
} 
function ShowAlert() 
{ 
  var alertWindow=$("alertParent"); 
  alertWindow.style.visibility="visible"; 
} 
$=function(id)
{ 
  return document.getElementById(id); 
} 
</script> 
</head> 
<body> 
<div id="alertParent" class="Div_Scroll"> 
  <div class="Div_Scroll_Content"> 
  <div id="AlertWindow" class="Div_AlertWindow"> 
    <input type="button" id="Sure" value="關閉視窗" /> 
  </div> 
</div> 
</div> 
<div> 
  <input id="alertButton" type="button" value="點選彈出視窗"/> 
</div> 
</body> 
</html>

以上程式碼實現了我們想要的效果，點選按鈕可以彈出一個視窗，並且帶有半透明的遮罩層，點選關閉按鈕可以關閉此彈出視窗，下面就詳細介紹一下次效果的實現過程。

一.實現原理:

在預設狀態下，全屏的遮罩層和彈出框是隱藏不可見的，當點選按鈕的時候遮罩層和彈出框都會出現，這樣就形成了帶有半透明的遮罩層彈出視窗效果，當點選彈出層的關閉按鈕的時候，然後再隱藏彈出框和這這層。

二.程式碼註釋:

說明:本註釋為了瀏覽者閱讀習慣不是按照程式碼行先後順序。

1.$=function(id){}，宣告一個函式，此函式類似於jquery的id選擇器，能夠返回指定id屬性值的物件。

2.window.onload=function(){},文件載入完畢後再去執行函式中的程式碼，可以防止無法獲取物件的錯誤。

3.var alertWindow=$("alertParent")，獲取id屬性值為alertParent元素物件。

4.var Sure=$("Sure")，獲取id屬性值為Sure的物件。

5.var alertButton=$("alertButton")，獲取屬性值為alertButton物件。

6.alertWindow.style.width=window.screen.availWidth+"px"，設定遮罩層的寬度為顯示器的可用寬度。

7.alertWindow.style.height=window.screen.height+"px"，設定遮罩層的高度為顯示器的可用高度。

8.Sure.onclick=function(){}，為關閉按鈕註冊事件處理函式。

9.alertWindow.style.visibility="hidden"，將彈出框設定為隱藏。

10.alertButton.onclick=ShowAlert，為alertButton按鈕註冊事件處理函式。

11.function ShowAlert() {}，用於顯示遮罩層。

特別說明:

此程式碼有所缺陷，那就是彈出視窗是遮罩層的子元素，這個時候設定遮罩層的透明度會影響到彈出視窗的透明度，不過可以簡單的改進一下就可以了，方式可以參閱如何設定div的透明度但是其中的文字不透明一章節。

相關文章