快捷導(dǎo)航

基于jquery的彈出提示框始終處于窗口的居中位置（類似于alert彈出框的效果）

更新時(shí)間：2011年09月28日 23:44:01 作者：

之前寫的代碼，都是在當(dāng)前窗口位于居中，可是一旦窗口縮小或者放大都不是位于居中的位置了，但是一直想寫的一個(gè)類似于alert彈出窗口的效果。

原理很簡(jiǎn)單：
獲取當(dāng)前屏幕（窗體）的寬度和高度，因?yàn)椴煌瑸g覽器的窗體大小是不一樣的。有了這個(gè)，可以計(jì)算出來垂直居中的坐標(biāo)。但是滑動(dòng)了滾動(dòng)條怎么依然垂直居中呢？這個(gè)時(shí)候就要獲取當(dāng)前窗體距離頁(yè)面頂部的高度，加到剛剛的y軸坐標(biāo)即可。
$(document)是獲取整個(gè)網(wǎng)頁(yè)的，$(window)是獲取當(dāng)前窗體的，這個(gè)要搞清楚。
最后把獲取的坐標(biāo)賦給窗體即可，窗體本身是絕對(duì)定位的，所以自然可以到窗體中間。
具體代碼：

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>彈出確認(rèn)框始終位于窗口的中間位置的測(cè)試</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(); //當(dāng)前瀏覽器窗口的 寬高 
var scrolltop = $(document).scrollTop();(),//獲取當(dāng)前窗口距離頁(yè)面頂部高度 
var objLeft = (screenWidth - obj.width())/2 ; 
var objTop = (screenHeight - obj.height())/2 + scrolltop; 
obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 
//瀏覽器窗口大小改變時(shí) 
$(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'}); 
}); 
//瀏覽器有滾動(dòng)條時(shí)的操作、 
$(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>彈出確認(rèn)框始終位于窗口的中間位置的測(cè)試</div> 
<div class="mask"></div> 
<div class="mess"> 
<p>確定要?jiǎng)h除嗎？</p> 
<p><input type="button" value="確定" class="btn1"/> 
<input type="button" value="取消"class="btn2"/></p> 
</div> 
</body> 
</html> 