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 easyui的tabs使用时的问题
Mar 23 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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利用cookie实现访问次数统计代码
2011/05/19 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
PHP循环遍历数组的3种方法list()、each()和while总结
2014/11/19 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python实现网站的模拟登录
2016/01/04 Python
深入浅析python定时杀进程
2016/06/06 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Python中捕获键盘的方式详解
2019/03/28 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
《口技》教学反思
2014/02/21 职场文书
年终工作总结范文2014
2014/11/27 职场文书
公务员年度考核评语
2014/12/31 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书