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 相关文章推荐
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
微信小程序image图片加载完成监听
Aug 31 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
人大复印资料处理程序_补充篇
2006/10/09 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
asp.net和php的区别点总结
2019/10/10 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
异步加载script的代码
2011/01/12 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
python2 与python3的print区别小结
2018/01/16 Python
python实现朴素贝叶斯算法
2018/11/19 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
Django实现简单的分页功能
2021/02/22 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
抵押贷款承诺书
2014/05/30 职场文书
铁路安全反思材料
2014/12/24 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
大四学生个人总结
2015/02/15 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
详解Laravel框架的依赖注入功能
2021/05/27 PHP
html中两种获取标签内的值的方法
2022/06/16 jQuery