基于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>
相关推荐
jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框jquery弹出框
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难，只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如：我想要这里是弹出浮动遮罩层</div> 并随页面...
弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出框jquery.弹出...
好看的jquery弹出框样式代码！
jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框 jQuery弹出框
Jquery 弹出框样式，多种支持。
jquery 弹出框jbox文件 jquery 弹出框jbox文件 jquery 弹出框jbox文件
jquery div 弹出框 jquery div 弹出框 jquery div 弹出框 jquery div 弹出框
jquery弹出框 提示框实例，很多实用的例子
jquery 1.4.3弹出框特效 各种jq弹出框特效
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
弹出框 弹出框 弹出框 弹出框 弹出框 弹出框 弹出框 弹出框 弹出框
jquery弹出层，自定义关闭的。可设置大小的。 可以改变位置带遮罩 可以关闭
各种jquery弹出框插件包括：Remodal弹出框两种，flavr弹出插件，leanmodal弹出框，Xconfirm弹出框，点击图片弹出大图alertPicture。
jquery弹出层当鼠标点击文字或图片弹出层，弹出层浮动在屏幕上可以随浏览器上下滚动，弹出层可自动居中在页面中间
通过html + css +jquery写的一个自定义弹出层，希望对大家有用。
jQuery弹出层插件三种简单遮罩弹出框效果
弹出框 jquery 真实案例
Asp.net中jquery弹出提示框源代码下载