代码如下:

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   
 });  
}

jquery实现弹出层完美居中效果的更多相关文章

  1. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  2. css+html+JQuery 万能弹出层,居中显示

    function ShowMsg(str) {//要提示的文字 $(".payment_time_mask").remove(); $("body").appe ...

  3. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  4. jQuery.reveal弹出层

    jQuery.reveal弹出层使用 最近用到弹出层,还得自定义UI,原本用的artDialog太庞大,不合适了,于是就找到了这个东西,又小又好用,基础的弹出遮罩都有了,想要什么还不是Coder自己说 ...

  5. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  6. layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  7. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  8. layer 弹出层 不居中

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  9. Jquery实现弹出层效果

    <script type="text/javascript"> $(document).ready(function(){ $('.one').click(functi ...

随机推荐

  1. IDEA 如何导出 todo 列表

    众所周知,IDEA 可以直接查看所有的 todo 列表, 快捷键是 Alt + 6 然后右键文件夹,选择[Expand All],展开所有目录 再然后,先选中最上边的文件,单击, 再选中最后一个文件, ...

  2. vue自定义指令导致的内存泄漏问题解决

    vue的自定义指令是一个比较容易引起内存泄漏的地方,原因就在于指令通常给元素绑定了事件,但是如果忘记了解绑,就会产生内存泄漏的问题. 看下面代码: directives: { scroll: { in ...

  3. 微信小程序 input 的 type属性 text、number、idcard、digit 区别

    微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...

  4. HikariCP连接池配置

    官网: https://github.com/brettwooldridge/HikariCP HikariCP现在已经是spring-boot-starter-jdbc中自带的默认连接池,在我们的生 ...

  5. 【Python】解析Python中的文件操作

    目录结构: contents structure [-] 简介 Python中的文件类型 内置函数的文件操作 open()函数 Mode 创建文本文件 读取文本文件 循环文件对象 关闭文件 With语 ...

  6. QT5 编译提示 cannot find GL/gl.h ubuntu16.04

    安装软件: sudo apt-get install mesa-common-dev sudo apt-get install libgl1-mesa-dev libglu1-mesa-dev

  7. Ubuntu系统配置双网卡ssh放外网

    (下面的IP,最后一位都用X代替) 先看看网卡设备的名字,下面要用(一般就是前两个):ifconfigsudo lshw -C network| grep -e  'logical name' 设置服 ...

  8. resources-plugin-2.6.pom.part.lock (没有那个文件或目录)

    由于 自定义 maven 仓库没权限 /home/repository 自定义目录 [root@localhost Service]# cat /etc/group|grep jenkins jenk ...

  9. Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢?

    Python绘制六种可视化图表详解,三维图最炫酷!你觉得呢? 可视化图表,有相当多种,但常见的也就下面几种,其他比较复杂一点,大都也是基于如下几种进行组合,变换出来的.对于初学者来说,很容易被这官网上 ...

  10. 定制flask-admin的主页

    flask也用了很久了,一般配合flask-admin设置后台. 但是flask-admin设置的都是自己加入的,对某些model进行管理. 下面介绍如何定制flask-admin的首页. 原来我们引 ...