jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果

更新時(shí)間：2016年09月12日 16:39:27 作者：onestopweb

這篇文章主要介紹了jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果,涉及jQuery針對(duì)頁(yè)面元素的運(yùn)算與樣式的動(dòng)態(tài)修改相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果。分享給大家供大家參考，具體如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop window</title>
<style>
*{
  padding: 0;
  margin: 0;
}
.hide{
  display: none;
}
.popWindow{
  width: 300px;
  height: 300px;
  background: #abcdef;
  padding: 2px;
  margin: 10px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.popWindow h3{
  height: 30px;
  line-height: 30px;
}
.popWindow h3 span{
  float: right;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}
.popWindow h3 span:hover{
  color: #f00;
}
.popWindow .content{
  height: 270px;
  background: #fff;
}
.mask{
  background: #000;
  opacity: 0.4;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
</style>
</head>
<body style="width:2000px">
<a href="javascript:;" id="show">顯示窗口</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="popWindow hide">
<h3>彈出窗口的標(biāo)題<span>關(guān)閉</span></h3>
<div class="content">彈出窗口的內(nèi)容</div>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
  var oBtn = $('#show');
  var popWindow = $('.popWindow');
  var oClose = $('.popWindow h3 span');
  //瀏覽器可視區(qū)域的寬度
  var browserWidth = $(window).width();
  //瀏覽器可視區(qū)域的高度
  var browserHeight = $(window).height();
  //瀏覽器縱向滾動(dòng)條距離上邊界的值
  var browserScrollTop = $(window).scrollTop();
  //瀏覽器橫向滾動(dòng)條距離左邊界的值
  var browserScrollLeft = $(window).scrollLeft();
  //彈出窗口的寬度
  var popWindowWidth = popWindow.outerWidth(true);
  //彈出窗口的高度
  var popWindowHeight = popWindow.outerHeight(true);
  //left的值＝瀏覽器可視區(qū)域的寬度／2－彈出窗口的寬度／2+瀏覽器橫向滾動(dòng)條距離左邊界的值
  var positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
  //top的值＝瀏覽器可視區(qū)域的高度／2－彈出窗口的高度／2+瀏覽器縱向滾動(dòng)條距離上邊界的值
  var positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
  var oMask = '<div class="mask"></div>'
  //遮照層的寬度
  var maskWidth = $(document).width();
  //遮照層的高度
  var maskHeight = $(document).height();
  oBtn.click(function(){
    popWindow.show().animate({
          'left':positionLeft+'px',
          'top':positionTop+'px'
    },500);
    $('body').append(oMask);
    $('.mask').width(maskWidth).height(maskHeight);
  });
  $(window).resize(function(){
    if(popWindow.is(':visible')){
      browserWidth = $(window).width();
      browserHeight = $(window).height();
      positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
      positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
      popWindow.animate({
            'left':positionLeft+'px',
            'top':positionTop+'px'
      },500);
    }
  });
  $(window).scroll(function(){
    if(popWindow.is(':visible')){
      browserScrollTop = $(window).scrollTop();
      browserScrollLeft = $(window).scrollLeft();
      positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;
      positionTop = browserHeight/2 - popWindowHeight/2+browserScrollTop;
      popWindow.animate({
            'left':positionLeft+'px',
            'top':positionTop+'px'
      },500).dequeue();
    }
  });
  oClose.click(function(){
    popWindow.hide();
    $('.mask').remove();
  });
});
</script>
</body>
</html>

運(yùn)行效果圖如下：