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 相关文章推荐
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python3中的json模块使用详解
2018/05/05 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
Ruby如何进行文件操作
2014/07/17 面试题
三好学生自我鉴定
2013/12/17 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Mysql开启外网访问
2022/05/15 MySQL