JavaScript
搜索
分类

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

作者：onestopweb 时间：2024-04-19 10:17:20　

本文实例讲述了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程序设计有所帮助。

标签：jQuery,浮动窗口
0
投稿

猜你喜欢

  • Mysql数据库的安全性问题释疑

    2009-02-26 16:20:00

  • 对Python中创建进程的两种方式以及进程池详解

    2021-05-21 14:37:48

  • 通过淘宝数据爬虫学习python scrapy requests与response对象

    2021-11-07 05:46:39

  • python分批定量读取文件内容,输出到不同文件中的方法

    2021-10-05 21:29:30

  • 比较规范的验证Email地址是否正确的正则表达式

    2009-07-28 17:55:00

  • Sql server数据库优化

    2010-04-06 19:17:00

  • Python使用ffmpy将amr格式的音频转化为mp3格式的例子

    2021-06-14 13:50:07

  • Python实现Restful API的例子

    2023-03-23 18:28:10

  • Python爬取豆瓣视频信息代码实例

    2021-10-28 06:41:46

  • Python 设计模式行为型访问者模式

    2023-10-18 14:44:52

  • PyQt中实现自定义工具提示ToolTip的方法详解

    2023-11-09 13:34:56

  • python 中的int()函数怎么用

    2021-05-21 17:52:41

  • Python使用requests模块爬取百度翻译

    2023-07-31 14:17:22

  • JavaScript forEach()遍历函数使用及介绍

    2024-05-11 09:07:07

  • Javascript HTML5 Canvas实现的一个画板

    2024-04-10 10:39:36

  • Go语言编程中判断文件是否存在是创建目录的方法

    2024-05-21 10:22:02

  • python基于paramiko将文件上传到服务器代码实现

    2022-05-20 06:14:44

  • Windows下对MySQL安装的故障诊断与排除

    2008-12-17 16:50:00

  • Runnable.com 在线测试代码片分享网站

    2023-02-04 09:25:54

  • Python基于Django实现验证码登录功能

    2023-06-25 03:21:13
    • asp之家 网络编程 m.aspxhome.com