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 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php可变长参数处理函数详解
2017/02/22 PHP
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
Python实现网站注册验证码生成类
2017/06/08 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python中format()格式输出全解
2019/04/12 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
python合并多个excel文件的示例
2020/09/23 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
出纳试用期自我鉴定
2014/04/07 职场文书
植物生产学专业求职信
2014/08/08 职场文书
授权收款委托书
2014/09/23 职场文书
技术负责人岗位职责
2015/02/10 职场文书
回复函格式及范文
2015/07/14 职场文书