jquery实现弹出层完美居中效果


Posted in Javascript onMarch 03, 2014

jquery实现弹出层完美居中效果

showDiv($("#pop"));
function showDiv(obj){
 $(obj).show();
 center(obj);
 $(window).scroll(function(){
  center(obj);
 });
 $(window).resize(function(){
  center(obj);
 }); 
}
function center(obj){
 var windowWidth = document.documentElement.clientWidth;   
 var windowHeight = document.documentElement.clientHeight;   
 var popupHeight = $(obj).height();   
 var popupWidth = $(obj).width();    
 $(obj).css({   
  "position": "absolute",   
  "top": (windowHeight-popupHeight)/2+$(document).scrollTop(),   
  "left": (windowWidth-popupWidth)/2   
 });  
}
Javascript 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 #Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 #Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 #Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 #Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 #Javascript
js的hasownproperty使用示例
Mar 02 #Javascript
javascript对象的使用和属性操作示例详解
Mar 02 #Javascript
You might like
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
srcElement表格样式
2006/09/03 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
tensorflow之并行读入数据详解
2020/02/05 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
使用python+poco+夜神模拟器进行自动化测试实例
2020/04/23 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
函授本科毕业生自我鉴定
2013/10/16 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS