java布局垂直居中_jQuery弹出层始终垂直居中相对于屏幕或当前窗口

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

无标题文档

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

//浏览器窗口垂直居中

//当前窗口垂直居中

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

});

});