jquery實現的彈出居中視窗效果

admin發表於2017-02-23
jQuery

點選一個按鈕彈出一個視窗效果在各種網站都有應用，本章節不單單介紹彈出居中視窗的效果，而且還有居左和居右效果，下面先看程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>jquery實現的彈出視窗效果-螞蟻部落</title> 
<style type="text/css"> 
.window{ 
  width:250px; 
  background-color:#d0def0; 
  position:absolute; 
  padding:2px; 
  margin:5px; 
  display:none; 
} 
.content{ 
  height:150px; 
  background-color:#FFF; 
  font-size:14px; 
  overflow:auto; 
} 
.title{ 
  padding:2px; 
  color:#0CF; 
  font-size:14px; 
} 
.title img{ 
  float:right; 
} 
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function (){ 
  $("#btn_center").click(function (){ 
    popCenterWindow(); 
  })
  $("#btn_right").click(function (){ 
    popRightWindow(); 
  }) 
  $("#btn_left").click(function (){ 
    popLeftWindow(); 
  })
})
var windowHeight; 
var windowWidth; 
var popWidth; 
var popHeight; 
function init(){ 
  windowHeight=$(window).height(); 
  windowWidth=$(window).width(); 
  popHeight=$(".window").height(); 
  popWidth=$(".window").width(); 
}
function closeWindow(){ 
  $(".title img").click(function(){ 
    $(this).parent().parent().hide("slow"); 
  })
}
function popCenterWindow(){ 
  init(); 
  var popY=(windowHeight-popHeight)/2; 
  var popX=(windowWidth-popWidth)/2; 
  $("#center").css("top",popY).css("left",popX).slideToggle("slow"); 
  closeWindow(); 
} 
function popLeftWindow(){ 
  init(); 
  var popY=windowHeight-popHeight; 
  $("#left").css("top",popY-50).css("left",50).slideToggle("slow"); 
  closeWindow(); 
} 
function popRightWindow(){ 
  init(); 
  var popY=windowHeight-popHeight; 
  var popX=windowWidth-popWidth; 
  $("#right").css("top",popY-50).css("left",popX-50).slideToggle("slow"); 
  closeWindow(); 
}
</script> 
</head> 
<body> 
<div> 
  <input type="button" value="居中視窗" id="btn_center" /> 
  <input type="button" value="居左下角" id="btn_left" /> 
  <input type="button" value="居右下角" id="btn_right" /> 
</div> 
<div class="window" id="center"> 
  <div id="title" class="title">
     <img src="mytest/jQuery/close.jpg" alt="關閉" />居中視窗
  </div> 
  <div class="content">螞蟻部落</div> 
</div>
<div class="window" id="left"> 
  <div id="title2" class="title">
    <img src="mytest/jQuery/close.jpg" alt="關閉" />居左視窗
  </div> 
  <div class="content">螞蟻部落</div> 
</div> 
<div class="window" id="right"> 
  <div id="title3" class="title">
    <img src="mytest/jQuery/close.jpg" alt="關閉" />居右視窗
  </div> 
  <div class="content">螞蟻部落</div> 
</div> 
</body> 
</html>

以上程式碼單擊不同的按鈕可以在不同位置彈出對話方塊，下面就就介紹一下實現此特效的過程:

一.實現原理:

實現的原理很簡單，在預設狀態下，彈出框都是隱藏的，當點選相應的對話方塊的時候使用slideToggle()函式將對話方塊顯示出來，再點選的時候會隱藏對話方塊，關於視窗的定位會在程式碼註釋中介紹，這裡就不多介紹了。

二.程式碼註釋:

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

2.$("#btn_center").click(function (){}，當點選id為btn_center的按鈕時可以執行函式中的程式碼。

3.popCenterWindow()，呼叫此函式可以顯示和隱藏視窗。

4.var windowHeight，var windowWidth，var popWidth，var popHeight宣告四個變數。

5.function init(){}，宣告函式，用來獲得一些值。

6.windowHeight=$(window).height()，獲取視窗的高度。

7.windowWidth=$(window).width()，獲取視窗的寬度。

8.popHeight=$(".window").height()，獲取class屬性值為window的元素的高度。

9.popWidth=$(".window").width()，獲取class屬性值為window的元素的寬度。

10.function closeWindow(){}，此函式用來隱藏視窗。

11.$(".title img").click(function(){ }，為圖片註冊click事件處理函式，當點選的時候可以關閉視窗。

12.$(this).parent().parent().hide("slow")，隱藏當前元素父元素的父元素。

13.function popCenterWindow(){}，此函式用來固定視窗的位置和註冊關閉圖片的click事件處理函式。

14.init()，呼叫init()函式。

15.var popY=(windowHeight-popHeight)/2，將彈出視窗的top屬性值設定為視窗高度減去彈出視窗高度然後再除以2，這樣就可以垂直居中了，水平居中也是同樣的道理，一個純粹的數學問題。

16.$("#center").css("top",popY).css("left",popX).slideToggle("slow")，通過CSS函式將彈出視窗居中。

17.closeWindow()，為關閉圖片註冊事件click事件處理函式。

相關文章