jquery 弹出框当前页面居中（有滚动条）

zjx2388

浏览: 1330814 次
性别:
来自: 北京

最近访客更多访客>>

da19900

nenyalanye_1

lesliehanhan

sosoab

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Page

基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）

原理：
获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。
$(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。
最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。

最重要的代码：

        var screenWidth = $(window).width();
        var screenHeight = $(window).height(); //当前浏览器窗口的宽高
        var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度
        var objLeft = (screenWidth - 2)/2 ;   //2 可以根据需要修改

var objTop = (screenHeight - 100)/2 + scrolltop; //100可以根据需要修改

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>弹出确认框始终位于窗口的中间位置的测试</title> 
<style type="text/css"> 
.mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); display: none; z-index: 99; } 
.mess { position: absolute; display: none; width: 250px; height: 100px; border: 1px solid #ccc; background: #ececec; text-align: center; z-index: 101; } 
</style> 
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('.btn').click(function() { 
$('.mask').css({'display': 'block'}); 
center($('.mess')); 
check($(this).parent(), $('.btn1'), $('.btn2')); 
}); 
// 居中 
function center(obj) { 
var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高 
var scrolltop = $(document).scrollTop();(),//获取当前窗口距离页面顶部高度 
var objLeft = (screenWidth - obj.width())/2 ; 
var objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
//浏览器窗口大小改变时 
$(window).resize(function() { 
screenWidth = $(window).width(); 
screenHeight = $(window).height(); 
scrolltop = $(document).scrollTop(); 
objLeft = (screenWidth - obj.width())/2 ; 
objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
}); 
//浏览器有滚动条时的操作、 
$(window).scroll(function() { 
screenWidth = $(window).width(); 
screenHeight = $(widow).height(); 
scrolltop = $(document).scrollTop(); 
objLeft = (screenWidth - obj.width())/2 ; 
objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
}); 
} 
//确定取消的操作 
function check(obj, obj1, obj2) { 
obj1.click(function() { 
obj.remove(); 
closed($('.mask'), $('.mess')); 
}); 
obj2.click(function() { 
closed($('.mask'), $('.mess')); 
}) ; 
} 
// 隐藏 的操作 
function closed(obj1, obj2) { 
obj1.hide(); 
obj2.hide(); 
} 
}); 
</script> 
</head> 
<body> 
<input type="button" class="btn" value="btn"/> 
<div>弹出确认框始终位于窗口的中间位置的测试</div> 
<div class="mask"></div> 
<div class="mess"> 
<p>确定要删除吗？</p> 
<p><input type="button" value="确定" class="btn1"/> 
<input type="button" value="取消"class="btn2"/></p> 
</div> 
</body> 
</html>

分享到：

sql 添加修改删除字段语句 | Oracle一列的多行数据拼成一行显示字符

2013-01-24 14:28
浏览 12790
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论