把弹出层的位置设为fixed，设置top：50%，然后获取当前元素的整体的高度height，用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于当前窗口

弹出层永远是一个前端必须搞定的东西，一般情况下，如果弹出层有固定的高和宽，用样式即可搞定，但是如果碰到没有固定高或者固定宽或者固定高和宽的时候， 我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了2种情况，一个是相对于屏幕窗体，一个是相对于当前的窗口，看代码，或许对你有用：

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{margin:0px;padding:0px}
#div1{background:#F00;color: #FFF; display:none;position:absolute;}
#div2{background:#333333;color: #FFF;width:400px;display:none; position:absolute;}
</style>
<Script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
//浏览器窗口垂直居中
<!--
<Script type="text/javascript">
function popup(popupName){
var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度
_windowHeight = $(window).height(),//获取当前窗口高度
_windowWidth = $(window).width(),//获取当前窗口宽度
_popupHeight = popupName.height(),//获取弹出层高度
_popupWeight = popupName.width();//获取弹出层宽度
_posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;
_posiLeft = (_windowWidth - _popupWeight)/2;
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
}
$(function(){
$(".btn1").click(function(){
popup($("#div1"));
});
$(".btn2").click(function(){
popup($("#div2"));
});
});
</script>
-->
//当前窗口垂直居中
<Script type="text/javascript">
function popup(popupName){
_windowHeight = $(".wrap").height(),//获取当前窗口高度
_windowWidth = $(".wrap").width(),//获取当前窗口宽度
_popupHeight = popupName.height(),//获取弹出层高度
_popupWeight = popupName.width();//获取弹出层宽度
_posiTop = (_windowHeight - _popupHeight)/2;
_posiLeft = (_windowWidth - _popupWeight)/2;
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
}
$(function(){
$(".btn1").click(function(){
popup($("#div1"));
});
$(".btn2").click(function(){
popup($("#div2"));
});
});
</script>
</head>
<body >
<div >
<input class="btn1" type="button" value="1"/></div>
<input class="btn2" type="button" value="2"/></div>
<div style="width:500px; background:#ccc; position:relative; top:100px; left:200px;" class="wrap">
我
是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口
啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口
啊<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊
<br>我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊
<div

id="div1">我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<
br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹出窗口1111啊<br>我是弹
出窗口1111啊</div>
<div
id="div2">我是弹出窗口2222啊<br>我是弹出窗口2222啊<br>我是弹出窗口2222啊<
br>我是弹出窗口2222啊<br>我是弹出窗口2222啊</div>
</div>
</body>
</html>

jQuery弹出层始终垂直居中相对于屏幕或当前窗口的更多相关文章

  1. 【转载】jQuery弹出层始终垂直居中于当前屏幕

    一般网站上肯定有一些弹出框,不论弹出框的大小,都需要他在当前窗口垂直居中.之前手上就有一个jQuery的例子,后来才发现,他只能在第一屏垂直居中,如果滑动滚动条,弹出的框就在上方,不是很方便.请教朋友 ...

  2. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  3. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  5. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  6. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

  7. jQuery弹出层效果

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  8. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  9. 简单实用的JQuery弹出层

    效果: 初始状态时滚动条是可以滚动的 弹出层出现之后:1.弹窗始终居于整个窗口的中间 2.滚动条不可滚动 实现代码: HTML代码: <div class="container&quo ...

随机推荐

  1. 简单探索ContentProviderOperation

    前面一片文章中用到了ContentProviderOperation,那么我们就来看看ContentProviderOperation到底是怎么工作的. 1. ContentProviderOpera ...

  2. 【第53套模拟题】【递推】【RMQ】【二进制】【分块】

    题目:(开始自己描述题目了...) 第一题大意: 求1~n的所有排列中逆序对为k个的方案数,输出方案数%10000,n<=1000. 解:这道题一个递推,因为我基本上没怎么自己做过递推,所以推了 ...

  3. Eclipse快捷键 10个最有用的快捷键---摘录

    55 48 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开发效率和质量得到 ...

  4. 网易云课堂 OCP

    数据库DBA任务: 管理数据库可用性 设计并创建数据库 管理物理结构 管理基于设计的存储 管理安全性 网络管理 备份与恢复 数据库调整与优化 关系型数据库(RDBMS) 多个表数据之间存在着关系 关系 ...

  5. MySQL数据库远程连接

    12.00 MySQL数据库远程连接 参考: http://www.jb51.net/article/24508.htm http://www.linuxdiyf.com/viewarticle.ph ...

  6. IPAD2 5.1.1越狱后的屏幕不能自动旋转~~~

    己顶,出现这问题的原因是因为越狱安装了插件的原因.问题解决了,大家没有遇到类似的问题吗?问题出在大家都装了一个SBSettings的插件,解决办法就是在这个插件的ISO 5+ Notification ...

  7. c# Winforms WebBrowser - Clear all cookies

    Hello,   I recently search for a method to delete all cookies from the build in .NET WinForms WebBro ...

  8. 2013年9月份第1周51Aspx源码发布详情

    大型B2B家具门户网源码  2013-9-6 [VS2008]功能描述: 1.门户信息管理 安全取数据即使数据库连接中断不会报错 2.稳定性 每句代码经过3次以上检查.此网站还在运营3年了,没有出过问 ...

  9. MyEclipse 安装目录下找不到Common目录

    最近在安装了MyEclipse,由于是自己指定的安装目录,在成功安装后要破解的时候却发现找不到安装目录下的Common目录,很是郁闷,后来发现如下: MyEclipse启动后的上方导航中找到MyEcl ...

  10. Java（JVM运行时）各种内存区域详解及扩展

    本文整理于  Java内存与垃圾回收调优 Java 堆内存 从几个sample来学习Java堆,方法区,Java栈和本地方法栈 首先来一张图让我们理清楚java运行时状态: 诚然,如上图所示:java ...