代码如下:

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. linux 下nc 命令的使用

    linux 下nc 命令的使用 https://blog.51cto.com/samyubw/555247

  2. JPA的查询方法总结

    一.使用where条件上一篇我们使用JPA进行了数据源的访问,默认JPA已经实现了好几个接口可以调用.但是,在实际的业务中,查询语句不可避免地需要使用where.order by等语句. 我们用商品数 ...

  3. kaggle, gmail, 烟雨朦胧

    kaggle, gmail, 烟雨朦胧 刚才为了体验kaggle,用gmail重新登录,需要验证十几年前在桂林使用的手机号,竟然找到了,终于又可以上了. 那是一个在烟雨江南里努力奋斗而又迷失自我不堪回 ...

  4. Anaconda(三)

    五.TensorFlow安装 这一天由于版本问题走了太多弯路.之前用的conda版本是最新的,自带Python3.7.5,装了之后倒是各种包都能装,用命令: pip install xxx conda ...

  5. 【APM】Pinpoint 监控告警(三)

    本例介绍Pinpoint告警的相关内容,Pinpoint参考[APM]Pinpoint 安装部署(一) Pinpoint Web会定期检查应用程序的状态,并在满足某些预配置条件(规则)的情况下触发警报 ...

  6. Hive、Inceptor数据倾斜详解及解决

    一.倾斜造成的原因 正常的数据分布理论上都是倾斜的,就是我们所说的20-80原理:80%的财富集中在20%的人手中, 80%的用户只使用20%的功能 , 20%的用户贡献了80%的访问量. 俗话是,一 ...

  7. Flask 学习(二)jinja2模板介绍

    控制语句和表达式 举例 Flask Python代码 from flask import Flask, render_template, redirect, request app = Flask(_ ...

  8. WPF--控件模板的视觉效果呈现流程及逻辑

    外部通过属性把数据--传递给-->(破拆后)内部可视化树 ----> 内部可视化树呈现出视觉效果 ----> 各种内部可视化组件的视觉效果组合  --- 呈现 -->  外部的 ...

  9. massif 图例

    19.63^ ### | # | # :: | # : ::: | :::::::::# : : :: | : # : : : :: | : # : : : : ::: | : # : : : : : ...

  10. 【MongoDB学习之六】MongoDB集群

    环境 MongoDB 4.0 CentOS 6.5_x64 一.主从复制-Master-Slave这种模式已不再推荐使用了. 二.副本集-Replica Set(用的多)副本集其实一种互为主从的关系, ...