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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
vue回到顶部监听滚动事件详解
Aug 02 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 Ajax乱码
2008/04/09 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP导入导出Excel代码
2015/07/07 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
JS实现分页导航效果
2020/02/19 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python实现逆波兰计算表达式实例详解
2015/05/06 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python实现图片处理和特征提取详解
2017/11/13 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
python打开windows应用程序的实例
2019/06/28 Python
利用python实现逐步回归
2020/02/24 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
Yahoo-PHP面试题2
2014/12/06 面试题
护理专科毕业推荐信
2013/11/10 职场文书
高三地理教学反思
2014/01/11 职场文书
高中生期末评语大全
2014/01/28 职场文书
个人求职信格式范文
2015/03/20 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python