一般网站上肯定有一些弹出框，不论弹出框的大小，都需要他在当前窗口垂直居中。之前手上就有一个jQuery的例子，后来才发现，他只能在第一屏垂直居中，如果滑动滚动条，弹出的框就在上方，不是很方便。请教朋友后稍作修改，成了现在的例子。
我把写好的DEMO封装了，方便一个网站有多个地方需要弹出框，直接调用这个方法传一个框的ID或者class的参数即可。
下面是代码分析，注释已经写得很清楚了，看得懂jQuery的应该都看得懂。
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"));
});
});
原理很简单，获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。
$(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。
最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。
还有一点要提示一下，尽量把弹出框的代码写到外层，例如最底部。因为如果你写到里面，他的外面如果哪里写了定位，那么弹出框将在这个容器里垂直居中，而不是在窗体的垂直居中了。相信熟练使用相对定位、绝对定位的朋友应该懂我意思。
😳 沙发！咔咔····
垂直居中..推荐用position:fixed…IE6就用absolute..
顺带你也可以通过计算出的宽高加上一个遮罩层…
刚刚还在群里讲不会fixed。看了下slimbox2，我应该遮罩层没问题。有空往上加
ie不支持fixed
😳 可惜看不懂的说
可惜看不懂。
技术帖，看不懂，纯支持
这个不懂的说！！
没搞过代码
看不懂+1 ❓
现在看到技术类的东东，就有点头疼啊
懂jQuery还是好啊，不像我，到处找源代码，放到页面里又不兼容，烦啊~~
又是技术贴，看不懂~
😈 😈 😈 路过了，，
最近开始更新文章了，看来有时间啊！
技术贴..这样的帖我一般只顶的
😉 过来学习一下！
弹框，不大好吧
ie6就absolute+expression, 其它一律fixed
IE6下要是不能合理使用expression, 性能会大打折扣啊… 不建议用.
技术帖，不懂。
为什么我把我的网站域名地址去掉了WWW百度还是收录我的www.xiaoxiaocn.com这个地址呢
把301做好，其他的事就不要管了。把百度当傻子看待。
技术帝 ❗
可以，先学习下。
收用了！
祝博主国庆快乐！
💡 技术帝 ❗ ❗
收下了，说不定以后还有用。
找出点小问题来。弹出后再缩小窗口就不居中了。
弹出层~~~老子最近做这个做得要吐了~~~~~~
你好，无意中看到你的博客，内容很不错。Mark一下。
用CSS能达到这功能不？？
可以，不过低级浏览器肯定是不支持的