jQuery实现弹出带遮罩层的居中浮动窗口效果


Posted in Javascript onSeptember 12, 2016

本文实例讲述了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>

运行效果图如下:

jQuery实现弹出带遮罩层的居中浮动窗口效果

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Open and Print a Word Document
Jun 15 Javascript
javascript 数组排序函数
Aug 20 Javascript
jQuery插件开发全解析
Oct 10 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
微信小程序支付前端源码
Aug 29 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 #Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 #Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 #Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 #Javascript
初识简单却不失优雅的Vue.js
Sep 12 #Javascript
jQuery实现简单的tab标签页效果
Sep 12 #Javascript
深入探讨Vue.js组件和组件通信
Sep 12 #Javascript
You might like
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
微信access_token的获取开发示例
2015/04/16 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python实现识别手写数字 python图像识别算法
2020/03/23 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Python短信轰炸的代码
2020/03/25 Python
python实现数字炸弹游戏
2020/07/17 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
小区停车场管理制度
2014/01/27 职场文书
小学英语教学反思案例
2014/02/04 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
校运会加油稿大全
2015/07/22 职场文书
婚宴领导致辞
2015/07/28 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis