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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
js获取微信版本号的方法
May 12 Javascript
javascript中 try catch用法
Aug 16 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
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采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
vue短信验证性能优化如何写入localstorage中
2018/04/25 Javascript
react build 后打包发布总结
2018/08/24 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
pandas 选择某几列的方法
2018/07/03 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
新学期校长寄语
2014/01/18 职场文书
岗位职责说明书
2014/05/07 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
oracle索引总结
2021/09/25 Oracle