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加解密功能页面
Dec 12 Javascript
JavaScript面向对象编程
Mar 02 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
使用jQuery操作DOM的方法小结
Feb 27 Javascript
js实现二级导航功能
Mar 03 Javascript
基于DOM节点删除之empty和remove的区别(详解)
Sep 11 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 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中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
写出高质量的PHP程序
2012/02/04 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
JS键盘版计算器的制作方法
2016/12/03 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python 调用Java实例详解
2017/06/02 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
详解python算法常用技巧与内置库
2020/10/17 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
捐助倡议书范文
2014/04/15 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
Java异常处理try catch的基本用法
2021/12/06 Java/Android