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对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
HTML+JS实现在线朗读器
Feb 15 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Python编程之微信推送模板消息功能示例
2017/08/21 Python
浅析python协程相关概念
2018/01/20 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
详解python中的装饰器
2018/07/10 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python创建学生管理系统
2019/11/22 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python代码能做成软件吗
2020/07/24 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
高三英语教学反思
2014/01/13 职场文书
2016中秋节广告语
2016/01/28 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript