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 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
vue实现树形菜单效果
Mar 19 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
js表格分页实现代码
2009/09/18 Javascript
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
详解node nvm进行node多版本管理
2017/10/21 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python中的colorlog库使用详解
2019/07/05 Python
Python 使用 docopt 解析json参数文件过程讲解
2019/08/13 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
Python模块常用四种安装方式
2020/10/20 Python
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
DOM和JQuery对象有什么区别
2016/11/11 面试题
2014年大学生自我评价
2014/01/19 职场文书
入党自我评价优缺点
2014/01/25 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis
css3 文字断裂效果
2022/04/22 HTML / CSS
Python first-order-model实现让照片动起来
2022/06/25 Python