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 相关文章推荐
jQuery对象和DOM对象相互转化
Apr 24 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
Javascript实现单例模式
Jan 24 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
JS实现横向跑马灯效果代码
Apr 20 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读取数据库信息的几种方法
2008/05/24 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
js调用flash的效果代码
2008/04/26 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
详解angularjs利用ui-route异步加载组件
2017/05/21 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
借款协议书范本
2014/04/22 职场文书
法人授权委托书
2014/09/16 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
go结构体嵌套的切片数组操作
2021/04/28 Golang
vue递归实现树形组件
2022/07/15 Vue.js