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实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
Javascript中replace()小结
Sep 30 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php读取html并截取字符串的简单代码
2009/11/30 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
Python 文件和输入输出小结
2013/10/09 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
python简单获取数组元素个数的方法
2015/07/13 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
法雷奥SQA(electric)面试问题
2016/01/23 面试题
生物技术专业求职信
2014/06/10 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python