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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 Javascript
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
第十一节 重载 [11]
2006/10/09 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
微信小程序多音频播放进度条问题
2018/08/28 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python实现批量改文件名称的方法
2015/05/25 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python中使用序列的方法
2015/08/03 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
客户代表自我评价范例
2013/09/24 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
安全隐患整改报告
2014/11/06 职场文书
2014年计生工作总结
2014/11/21 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
成事在人观后感
2015/06/16 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Golang连接并操作MySQL
2022/04/14 MySQL