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 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
jQuery中removeAttr()方法用法实例
Jan 05 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
js实现电灯开关效果
Jan 19 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截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
Position属性之relative用法
2015/12/14 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python编码类型转换方法详解
2016/07/01 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python制作词云的方法
2018/01/03 Python
python中logging包的使用总结
2018/02/28 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
初中数学教学反思范文
2016/02/17 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers