jQuery實現彈出帶遮罩層的居中浮動窗口效果

2019-11-20 09:01:27

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jQuery實現彈出帶遮罩層的居中浮動窗口效果。分享給大家供大家參考，具體如下：

<!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>彈出窗口的標題<span>關閉</span></h3><div class="content">彈出窗口的內容</div></div><script src="jquery-1.7.2.min.js"></script><script>$(function(){  var oBtn = $('#show');  var popWindow = $('.popWindow');  var oClose = $('.popWindow h3 span');  //瀏覽器可視區域的寬度  var browserWidth = $(window).width();  //瀏覽器可視區域的高度  var browserHeight = $(window).height();  //瀏覽器縱向滾動條距離上邊界的值  var browserScrollTop = $(window).scrollTop();  //瀏覽器橫向滾動條距離左邊界的值  var browserScrollLeft = $(window).scrollLeft();  //彈出窗口的寬度  var popWindowWidth = popWindow.outerWidth(true);  //彈出窗口的高度  var popWindowHeight = popWindow.outerHeight(true);  //left的值＝瀏覽器可視區域的寬度／2－彈出窗口的寬度／2+瀏覽器橫向滾動條距離左邊界的值  var positionLeft = browserWidth/2 - popWindowWidth/2+browserScrollLeft;  //top的值＝瀏覽器可視區域的高度／2－彈出窗口的高度／2+瀏覽器縱向滾動條距離上邊界的值  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>

運行效果圖如下：