jQuery实现弹出窗口弹出div层的实例代码


Posted in Javascript onJanuary 09, 2017

通过今天的jquery实例学习,我们要达到这样的效果:点击页面的链接,弹出一个div层,同时页面的其他部分变灰并且不能点击;无论是改变浏览器窗口大小还是下拉滚动条,这个弹出层都能始终保持居中;点击页面的关闭按钮,弹出层消失,页面恢复原样。

这里借鉴之前的一篇文章《基于jQuery的固定飘浮层》,使弹出窗口可以始终固定在浏览器的正中间。在这里有一个要点,就是如何使页面的其他地方在弹出窗口的同时变灰。我使用的方法就是在点击链接弹出div层的时候,给页面增加一个div层,这个层就“负责”使页面变灰。点击关闭后,删除这个层就能使页面恢复原样。不知道有没有更好的方法,有的话请告诉我哦。

其他应该没什么问题了,还是很简单的,在这里顺便贴上jQuery代码:

$(function(){ 
var screenwidth,screenheight,mytop,getPosLeft,getPosTop 

screenwidth = $(window).width(); 

screenheight = $(window).height(); 

//获取滚动条距顶部的偏移 

mytop = $(document).scrollTop(); 

//计算弹出层的left 

getPosLeft = screenwidth/2 - 260; 

//计算弹出层的top 

getPosTop = screenheight/2 - 150; 

//css定位弹出层 

$("#box").css({"left":getPosLeft,"top":getPosTop}); 

//当浏览器窗口大小改变时... 

$(window).resize(function(){ 

<span style="white-space:pre">  </span>screenwidth = $(window).width(); 

<span style="white-space:pre">  </span>screenheight = $(window).height(); 

<span style="white-space:pre">  </span>mytop = $(document).scrollTop(); 

<span style="white-space:pre">  </span>getPosLeft = screenwidth/2 - 260; 

<span style="white-space:pre">  </span>getPosTop = screenheight/2 - 150; 

<span style="white-space:pre">  </span>$("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); 

}); 

//当拉动滚动条时... 

$(window).scroll(function(){ 

<span style="white-space:pre">  </span>screenwidth = $(window).width(); 

<span style="white-space:pre">  </span>screenheight = $(window).height(); 

<span style="white-space:pre">  </span>mytop = $(document).scrollTop(); 

<span style="white-space:pre">  </span>getPosLeft = screenwidth/2 - 260; 

<span style="white-space:pre">  </span>getPosTop = screenheight/2 - 150; 

<span style="white-space:pre">  </span>$("#box").css({"left":getPosLeft,"top":getPosTop+mytop}); 

}); 

//点击链接弹出窗口 

$("#popup").click(function(){ 

<span style="white-space:pre">  </span>$("#box").fadeIn("fast"); 

<span style="white-space:pre">  </span>//获取页面文档的高度 

<span style="white-space:pre">  </span>var docheight = $(document).height(); 

<span style="white-space:pre">  </span>//追加一个层,使背景变灰 

<span style="white-space:pre">  </span>$("body").append("<div id='greybackground'></div>"); 

<span style="white-space:pre">  </span>$("#greybackground").css({"opacity":"0.5","height":docheight}); 

<span style="white-space:pre">  </span>return false; 

}); 

//点击关闭按钮 

$("#closeBtn").click(function() { 

<span style="white-space:pre">  </span>$("#box").hide(); 

<span style="white-space:pre">  </span>//删除变灰的层 

<span style="white-space:pre">  </span>$("#greybackground").remove(); 

<span style="white-space:pre">  </span>return false; 

}); 
});

html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery pop up</title> 
<script src=http://blog.soso.com/qz.q/"jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
* {margin:0;padding:0;} 

#wrapper {height:1000px;} 

#box {display:none;position:absolute;width:520px;height:300px;border:#f60 solid 2px;z-index:200;background:#fff;} 

#closeBtn {position:absolute;right:10px;top:10px;cursor:pointer;} 

#greybackground {background:#000;display:block;z-index:100;width:100%;position:absolute;top:0;left:0;} 
</style> 
</head> 
<body> 
 <div id="wrapper"> 

<a href=http://blog.soso.com/qz.q/"#" id="popup">点击弹出div窗口</a> 
 </div> 
 <div id="box"> 
 <span style="white-space:pre"> </span><span id="closeBtn">关闭</span> 
 </div> 
</body> 
</html>

以上所述是小编给大家介绍的jQuery实现弹出窗口弹出div层的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
List Installed Hot Fixes
Jun 12 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 #Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 #Javascript
jquery实现多次上传同一张图片
Jan 09 #Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 #Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 #Javascript
vue日期组件 支持vue1.0和2.0
Jan 09 #Javascript
jQuery编写设置和获取颜色的插件
Jan 09 #Javascript
You might like
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
php中的一个中文字符串截取函数
2007/02/14 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
2010/09/19 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
通过代码实例了解Python异常本质
2020/09/16 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
中专生的个人自我评价
2013/12/11 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
办理房产过户的委托书
2014/09/14 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript