jQuery弹出层始终垂直居中相对于屏幕或当前窗口

更新时间：2013年04月01日 18:10:18 作者：

碰到没有固定高或者固定宽或者固定高和宽的时候，我们就需要用JS去处理，去动态获取当前窗口高或者宽；今天弄了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> 

您可能感兴趣的文章:

QUnit jQuery的TDD框架
我今天只讨论基于JavaScript的TDD，可能有些公司是用C#做js单元测试的，但我不认为这是个好主意，很多js运行时的东西让js来返回会更直观，且易于维护。
2010-11-11
jQuery+ajax实现文章点赞功能的方法
这篇文章主要介绍了jQuery+ajax实现文章点赞功能的方法,涉及jQuery基于ajax无刷新post提交实现点赞功能的具体步骤与相关技巧,需要的朋友可以参考下
2015-12-12
jQuery插件jRumble实现网页元素抖动
jRumble是jquery的插件，可以让你选择的元素抖动。调用时只需一句代码即可，有些抖动效果还挺可爱，可自定义的抖动效果，十分的炫酷，有需要的小伙伴可以参考下。
2015-06-06
JQuery触发radio或checkbox的change事件
在JQuery中，当给radio或checkbox添加一个change事件时，如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下
2012-12-12
jQuery参数列表集合
jQuery参数列表集合，学习jquery的朋友可以收藏下。
2011-04-04
jQuery实现微信长按识别二维码功能
这篇文章主要介绍了jQuery实现微信长按识别二维码的功能，非常不错，具有参考借鉴价值，对jquery长按识别二维码的相关知识感兴趣的朋友一起学习吧
2016-08-08
jQuery 3 中的新增功能汇总介绍
本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了，这个版本是可能对你现有的项目产生太大的影响，因为没有引入太多许多重大更改。
2016-06-06
跟我一起学JQuery插件开发
一直比较好奇，jquery插件是怎么开发的，怎么写属于自己的插件
2012-04-04
jQuery 添加/移除CSS类实现代码
在网页设计中，我们常常要使用Javascript来改变页面元素的样式。
2010-02-02
jquery图片放大镜功能的实例代码
jquery图片放大镜功能的实例代码，需要的朋友可以参考一下
2013-03-03