代码如下:

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. PHP系列 | [转] PHP中被忽略的性能优化利器:生成器

    官方:https://www.php.net/manual/zh/language.generators.overview.php 原文:https://segmentfault.com/a/1190 ...

  2. android studio如何连接夜神模拟器

    原创 2018-02-05 21:35:03 会飞的鱼儿android 阅读数 16706 文章标签: 夜神模拟器连接夜神模拟器的简单方式 更多 分类专栏: Android   版权声明:本文为博主原 ...

  3. 013 mint-ui

    一:概述 1.中文文档 https://mint-ui.github.io/#!/en 2.安装包 二:mt-button的使用 主要是介绍css-component 1.程序 在App.vue下面写 ...

  4. i系列标准-互联网周刊

    原文:http://www.enet.com.cn/article/2019/0429/A20190429062899.html 传统意义上的规模.现代意义上的工具时代感.永远不会改变的最高意义上的使 ...

  5. Solidity开发注意

    pragma版本:1.版本要高于0.4.24才可以编译:2.高于0.5的版本则不可编译:3.第三位的版本号可以变,留出来用做bug可以修复(如0.4.1的编译器有bug,可在0.4.2修复,现有合约不 ...

  6. linux centos编译安装php7.3

    php7.2的编译安装参考:https://www.cnblogs.com/rxbook/p/9106513.html 已有的之前编译的旧版本php: mv /usr/local/php /usr/l ...

  7. sails 相关软件下载地址及命令

    vscode1.40   https://vscode.cdn.azure.cn/stable/f359dd69833dd8800b54d458f6d37ab7c78df520/VSCodeUserS ...

  8. 几个简单易用的IDEA快捷键

    常见的几个Idea的代码快捷键 格式化代码: Ctrl + Alt + L Optimize Imports(优化包引用): Ctrl-Alt-O 单行注释(//): Ctrl-/ 块注释(/*... ...

  9. Android设置顶部banner背景透明度时影响全局背景问题

    项目中用到滑动界面使顶部title栏背景渐隐渐现的效果,即初始不滑动时的透明度为0,用了bannerle.getBackground().setAlpha(0); 但使用这个方法设置透明度是管用,返回 ...

  10. /home/jdk1.8.0_211/jre/bin/java: Permission denied

    在Linux上安装JDK后启动tomcat 日志中提示  /home/jdk1.8.0_211/jre/bin/java: Permission denied 原因是:运行的命令在这个路径下没有权限 ...