帶有半透明遮罩層可關閉視窗

admin發表於2019-01-25
遮罩

只要是個彈出視窗一般都要求有半透明的遮罩效果，並且水平居中，否則的話自己都感覺很不入流，下面就通過一段程式碼例項簡單介紹一下如何實現這樣的效果，希望能夠給需要的朋友帶來一定的幫助。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body,h2 {
  margin:0;
  padding:0;
}
#faqbg {
  background-color:#666666;
  position:absolute;
  z-index:99;
  left:0;
  top:0;
  display:none;
  width:100%;
  height:1000px;
  opacity:0.5;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
}
#faqdiv {
  position:absolute;
  width:400px;
  left:50%;
  top:50%;
  margin-left:-200px;
  height:auto;
  z-index:100;
  background-color:#fff;
  border:1px #8FA4F5 solid;
  padding:1px;
}
#faqdiv h2 {
  height:25px;
  font-size:14px;
  background-color:#8FA4F5;
  position:relative;
  padding-left:10px;
  line-height:25px;
}
#faqdiv h2 a {
  position:absolute;
  right:5px;
  font-size:12px;
  color:#FF0000
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $(".but").click(function(){ 
    var str="螞蟻部落歡迎您，只有努力才會有美好的未來"; 
    $(".form").html(str); 
    $("#faqbg").css({display:"block",height:$(document).height()}); 
    $("#faqdiv").css("top","100px"); 
    $("#faqdiv").css("display","block"); 
  }); 
  $(".close").click(function(){ 
    $("#faqbg").css("display","none"); 
    $("#faqdiv").css("display","none"); 
  })
}) 
</script>
</head>
<body >
<div id="faqbg"></div>
<div id="faqdiv" style="display:none">
  <h2>資訊視窗<a href="#" class="close">關閉</a></h2>
  <div class="form">這裡是提示資訊！！</div>
</div>
<p align="center">
  <input value="點選彈出視窗" class="but" type="button" />
</p>
</body>
</html>

點選按鈕時候，彈出一個對話方塊，背景是一個半透明的遮罩層，點選關閉按鈕能夠關閉此對話方塊。

一.實現原理:

在預設狀態下，半透明的遮罩層是隱藏的，同時遮罩層採用絕對定位，可以通過設定z-index屬性值，將彈出框覆蓋在遮罩層之上，因為彈出框也是絕對定位。當點選按鈕的時候，遮罩層和彈出框都會被顯示，當點選關閉按鈕的時候，再將它們設定為隱藏狀態。

二.程式碼註釋:

（1）.$(function(){}），文件結構完全載入再去執行函式中的程式碼。

（2）.$(".but").click(function(){})，為按鈕註冊click事件處理函式。

（3）.var str="螞蟻部落歡迎您，只有努力才會有美好的未來"，宣告一個變數是對話方塊內顯示的字串。

（4）.$(".form").html(str)，將字串寫入指定元素內。

（5）.$("#faqbg").css({display:"block",height: $(document).height()})，將被透明遮罩層設定為顯示，並且高度為文件的高度。

（6）.$("#faqdiv").css("top","100px")，將彈出框的top屬性值設定為100px。

（7）.$("#faqdiv").css("display","block")，將彈出框設定為可見。

（8）.$(".close").click(function(){})，註冊事件處理函式，當點選連結的時候可以關閉彈出視窗和遮罩層。

（9）.$("#faqbg").css("display","none")，將遮罩層設定為隱藏。

（10）.$("#faqdiv").css("display","none")，將彈出視窗設定為隱藏。

三.相關閱讀:

（1）.click事件可以參閱jQuery click事件一章節。

（2）.html()函式可以參閱jQuery html()一章節。

（3）.css()函式可以參閱jQuery css()一章節。

（4）.height()函式可以參閱jQuery height()一章節。

相關文章