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 相关文章推荐
利用进制转换压缩数字函数分享
Jan 02 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
vue实现动态按钮功能
May 13 Javascript
微信小程序使用车牌号输入法的示例代码
Aug 20 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
vue中英文切换实例代码
Jan 21 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
smarty中post用法实例
2014/11/28 PHP
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Python算法应用实战之队列详解
2017/02/04 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
如何通过Python实现标签云算法
2019/07/02 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
建筑施工员岗位职责
2013/11/26 职场文书
高二物理教学反思
2014/02/08 职场文书
运动会跳远加油稿
2014/02/20 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python