Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jQuery弹出层始终垂直居中相对于屏幕或当前窗口

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

发布时间:2013-12-01   编辑:www.jquerycn.cn
碰到没有固定高或者固定宽或者固定高和宽的时候,我们就需要用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>

您可能感兴趣的文章:
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
jquery弹出层类代码分享
JS父子窗口相互取值与赋值的方法参考
解析jquery获取父窗口的元素
js获取浏览器窗口大小与屏幕宽高
JS获取屏幕、浏览器窗口大小、网页高度宽度的方法详解
javascript弹出对话框综合实例汇总
Javascript弹出窗口的多种方法
js获取屏幕高度 js屏幕属性信息

关键词: 弹出层  垂直居中  屏幕  当前窗口   
[关闭]