jQuery 10个实例中

五、弹出窗口

1. 实现基本功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body,button,a,h3{padding:0;margin:0;}
button{position:fixed;left:20px;top:20px;z-index:100;}
body{background:url(http://ruyic.com/blog/uploads/image/202211/166982358120973.jpg);}
.wrap{
z-index:103;
width:450px;box-shadow:3px 3px rgba(0, 0, 0, 0.2);
position:absolute;background:#fff;font-size:14px;}
.title{
line-height:32px;text-align:center;font-weight:normal;}
.clear{position:absolute;right:10px;top:-18px;font-size:12px;color:#fff;cursor:pointer;}
.content{height:160px;}
/* 遮罩 */
.widget-overlay {
z-index:101;
position:fixed;
top:0;left:0;
width:100%;height:100%;
background: #666666 url(https://code.jquery.com/ui/1.13.3/themes/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
opacity:.5;-ms-filter: "alpha(opacity=50)";}
</style>
<title>popWindow</title>
</head>
<body>

<button>弹出窗口</button>
<div class="wrap" style="display:none;">
  <h3 class="title">Code Integration</h3>
  <span class="clear">clear</span>
  <div class="content"></div>
</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  var wrap = $('.wrap'); // 获取窗口元素
  // 计算弹出窗口居的位置
  var browserWidth = $(window).width();
  var browserHight = $(window).height();
  var popWidth = wrap.outerWidth(true);
  var popHigth = wrap.outerHeight(true);
  var browserLeft = browserWidth / 2 - popWidth / 2;
  var browserTop = browserHight / 2 - popHigth / 2;

  $("button").click(function(){
    wrap.show()
      .animate({
        'left': browserLeft,
        'top': browserTop
      }, 500);
  });

  $('.clear').click(function(){
    wrap.hide().css({'left':0,'top':0})
  });
</script>
</body>
</html>

2. 改变视口尺寸，窗口始终居中

var wrap = $('.wrap');
// 计算弹出窗口居的位置
var browserWidth = $(window).width();
var browserHight = $(window).height();
var popWidth = wrap.outerWidth(true);
var popHigth = wrap.outerHeight(true);
var browserLeft = browserWidth / 2 - popWidth / 2;
var browserTop = browserHight / 2 - popHigth / 2;

$("button").click(function(){
  wrap.show()
    .animate({
      'left': browserLeft,
      'top': browserTop
    }, 500);
      
  $('.clear').click(function(){
    wrap.hide().css({'left':0,'top':0})
  });
});

// 监听视口尺寸，重新计算弹出窗口位置
$(window).resize(function(){
  browserWidth = $(window).width();
  browserHight = $(window).height();
  browserLeft = browserWidth / 2 - popWidth / 2;
  browserTop = browserHight / 2 - popHigth / 2;
  wrap.animate({
      'left': browserLeft,
      'top': browserTop
    }, 500).dequeue();
})

3. 出现滚动条时候，窗口始终居中

// 设置滚动条
$('body').height(1400);
$(document.body).width(2400);

var browserScrollTop = $(window).scrollTop(); // 获取浏览器纵向滚动条滚动的距离
var browserScrollLeft = $(window).scrollLeft(); // 获取浏览器横向滚动条滚动的距离

var wrap = $('.wrap');
var browserWidth = $(window).width();
var browserHight = $(window).height();
var popWidth = wrap.outerWidth(true);
var popHigth = wrap.outerHeight(true);
var browserLeft = browserWidth/2 - popWidth/2 + browserScrollLeft; // 加上滚动条横向的宽度
var browserTop = browserHight/2 - popHigth/2 + browserScrollTop; // 加上滚动条纵向的高度

$("button").click(function(){
  wrap.show()
    .animate({
      'left': browserLeft,
      'top': browserTop
    }, 500);
      
  $('.clear').click(function(){
    wrap.hide().css({'left':0,'top':0})
  });
});

$(window).resize(function(){
  if(!wrap.is(':visible')){ // 修复一个bug，弹出层元素显示的时候才执行
    return ;
  }
  browserWidth = $(window).width();
  browserHight = $(window).height();
  browserLeft = browserWidth/2 - popWidth/ 2 + browserScrollLeft; // 同样也加上滚动的宽度
  browserTop = browserHight/2 - popHigth/2 + browserScrollTop; // 同样也加上滚动的高度
  wrap.animate({
      'left': browserLeft,
      'top': browserTop
    }, 500).dequeue();
})

// 监听滚动条，弹出窗口始终居中
$(window).scroll(function(){
  if(!wrap.is(':visible')){ // 修复一个bug，弹出层元素显示的时候才执行
    return ;
  }
  browserScrollTop = $(window).scrollTop();
  browserScrollLeft = $(window).scrollLeft();
  browserLeft = browserWidth/2 - popWidth/ 2 + browserScrollLeft;
  browserTop = browserHight/2 - popHigth/2 + browserScrollTop;
  wrap.animate({
      'left': browserLeft,
      'top': browserTop
    }, 500).dequeue();
})

4. 加遮罩层，遮罩层不写 HTML 元素，用 js 生成 HTML

var wrap = $('.wrap');
// 在js里生成遮罩层元素
var widgetOverlay = '<div class="widget-overlay"></div>';

$('body').height(1400);
$(document.body).width(2400);
var browserScrollTop = $(window).scrollTop();
var browserScrollLeft = $(window).scrollLeft();
// 计算窗口位置
var browserWidth = $(window).width();
var browserHight = $(window).height();
var popWidth = wrap.outerWidth(true);
var popHigth = wrap.outerHeight(true);
var browserLeft = browserWidth/2 - popWidth/2 + browserScrollLeft;
var browserTop = browserHight/2 - popHigth/2 + browserScrollTop;

$("button").click(function(){
  wrap.show()
    .animate({
      'left': browserLeft,
      'top': browserTop
    }, 500);

  // 在body里面插入一个遮罩层
  $('body').append(widgetOverlay);

});

$('.clear').click(function(){
  wrap.hide().css({'left':0,'top':0});
  // 删除蒙版
  $('.widget-overlay').remove();
});

$(window).resize(function(){
  if(!wrap.is(':visible')){
    return ;
  }
  browserWidth = $(window).width();
  browserHight = $(window).height();
  browserLeft = browserWidth/2 - popWidth/ 2 + browserScrollLeft;
  browserTop = browserHight/2 - popHigth/2 + browserScrollTop;
  wrap.animate({
      'left': browserLeft,
      'top': browserTop
    }, 500).dequeue();
})

// 随着滚动条滚动，弹出窗口移动
$(window).scroll(function(){
  if(!wrap.is(':visible')){
    return ;
  }
  browserScrollTop = $(window).scrollTop();
  browserScrollLeft = $(window).scrollLeft();
  browserLeft = browserWidth/2 - popWidth/ 2 + browserScrollLeft;
  browserTop = browserHight/2 - popHigth/2 + browserScrollTop;
  wrap.animate({
      'left': browserLeft,
      'top': browserTop
    }, 500).dequeue();
})

jQuery 10个实例 中

五、弹出窗口