jQuery實現的彈出垂直水平居中視窗效果程式碼例項

螞蟻小編發表於2017-03-25
jQuery

彈出垂直居中視窗效果，在很多網站都有使用，下面就通過程式碼例項介紹一下如何利用jQuery實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{text-align:center}
.mask{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#000;
  opacity:0.5;
  filter:alpha(opacity=50);
  display:none;
  z-index:99;
}
.mess{
  position:absolute;
  display:none;
  width:250px;
  height:100px;
  border:1px solid #ccc;
  background:#ececec;
  text-align:center;
  z-index:101;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.btn').click(function(){       
    $('.mask').css({'display':'block'});
    center($('.mess'));
    check($(this).parent(), $('.btn1'), $('.btn2'));
  });
  // 居中
  function center(obj){
    var screenWidth=$(window).width();
    var screenHeight=$(window).height();//當前瀏覽器視窗的 寬高
    var scrolltop=$(document).scrollTop();//獲取當前視窗距離頁面頂部高度
 
    var objLeft=(screenWidth-obj.width())/2 ;
    var objTop=(screenHeight-obj.height())/2+scrolltop;
 
    obj.css({left:objLeft+'px',top:objTop+'px','display':'block'});
    //瀏覽器視窗大小改變時
    $(window).resize(function(){
      screenWidth=$(window).width();
      screenHeight=$(window).height();
      scrolltop=$(document).scrollTop();
 
      objLeft=(screenWidth-obj.width())/2 ;
      objTop=(screenHeight-obj.height())/2+scrolltop;
      obj.css({left:objLeft+'px',top:objTop+'px','display':'block'});   
    });
    //瀏覽器有滾動條時的操作、
    $(window).scroll(function(){
      screenWidth=$(window).width();
      screenHeight=$(widow).height();
      scrolltop=$(document).scrollTop();
 
      objLeft=(screenWidth-obj.width())/2 ;
      objTop=(screenHeight-obj.height())/2+scrolltop;
      obj.css({left:objLeft+'px',top:objTop+'px','display':'block'});
    });  
  }
  //確定取消的操作
  function check(obj,obj1,obj2){
    obj1.click(function(){
      obj.remove();
      closed($('.mask'), $('.mess'));
    });
    obj2.click(function(){
      closed($('.mask'),$('.mess'));
    }) ;
  }
  // 隱藏 的操作
  function closed(obj1,obj2){
    obj1.hide();
    obj2.hide();
  } 
});
</script>
</head>
<body>
<input type="button" class="btn" value="btn"/>
<div class="mask"></div>
<div class="mess">
  <p>確定要刪除嗎？</p>
  <p>
    <input type="button" value="確定" class="btn1"/>
    <input type="button" value="取消"class="btn2"/>
  </p>
</div>
</body>
</html>

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

一.程式碼註釋:

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

2.$('.btn').click(function(){})，為按鈕註冊click事件處理函式。

3.$('.mask').css({'display':'block'})，顯示半透明遮罩層。

4.center($('.mess'))，顯示彈出視窗，並使其居中顯示。

5.check($(this).parent(),$('.btn1'),$('.btn2'))，為相應的元素註冊事件處理函式。

6.function center(obj)，實現了彈出視窗的居中效果，引數是要居中的元素。

7.var screenWidth=$(window).width()，獲取瀏覽器客戶區的寬度。

8.var screenHeight=$(window).height()，獲取瀏覽器客戶區的高度。

9.var scrolltop=$(document).scrollTop()，獲取當前客戶區視窗頂端距離頁面頂端的距離。

10.var objLeft=(screenWidth-obj.width())/2，獲取彈出視窗的left屬性值。

11.var objTop=(screenHeight-obj.height())/2+scrolltop，獲取彈出視窗的top屬性值。

12.obj.css({left: objLeft+'px',top: objTop+'px','display':'block'}),設定元素的left和top屬性值。

13.$(window).resize(function(){})，為視窗註冊resize事件處理函式，事件處理函式的原理和上面都是一樣的。

14.function check(obj,obj1,obj2){}，此函式可以實現相應元素事件處理函式的註冊。

二.相關閱讀:

1.scrollTop()函式可以參閱jQuery scrollTop()一章節。

2.resize事件可以參閱jQuery resize 事件一章節。

3.remove()函式可以參閱jQuery remove()一章節。

相關文章