之前寫的代碼，都是在當前窗口位於居中，可是一旦窗口縮小或者放大都不是位於居中的位置了，但是一直想寫的一個類似於alert彈出窗口的效果。
原理很簡單：
獲取當前屏幕（窗體）的寬度和高度，因為不同瀏覽器的窗體大小是不一樣的。有了這個，可以計算出來垂直居中的坐標。但是滑動了滾動條怎么依然垂直居中呢？這個時候就要獲取當前窗體距離頁面頂部的高度，加到剛剛的y軸坐標即可。
$(document)是獲取整個網頁的，$(window)是獲取當前窗體的，這個要搞清楚。
最后把獲取的坐標賦給窗體即可，窗體本身是絕對定位的，所以自然可以到窗體中間。
具體代碼：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>彈出確認框始終位於窗口的中間位置的測試</title> 6 <style type="text/css"> 7 8 .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; } 9 .mess { position: absolute; display: none; width: 250px; height: 100px; border: 1px solid #ccc; background: #ececec; text-align: center; z-index: 101; } 10 </style> 11 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> 12 <script type="text/javascript"> 13 $(document).ready(function() { 14 $('.btn').click(function() { 15 $('.mask').css({'display': 'block'}); 16 center($('.mess')); 17 check($(this).parent(), $('.btn1'), $('.btn2')); 18 }); 19 // 居中 20 function center(obj) { 21 22 var screenWidth = $(window).width(), screenHeight = $(window).height(); //當前瀏覽器窗口的 寬高 23 var scrolltop = $(document).scrollTop();//獲取當前窗口距離頁面頂部高度 24 25 var objLeft = (screenWidth - obj.width())/2 ; 26 var objTop = (screenHeight - obj.height())/2 + scrolltop; 27 28 obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 29 //瀏覽器窗口大小改變時 30 $(window).resize(function() { 31 screenWidth = $(window).width(); 32 screenHeight = $(window).height(); 33 scrolltop = $(document).scrollTop(); 34 35 objLeft = (screenWidth - obj.width())/2 ; 36 objTop = (screenHeight - obj.height())/2 + scrolltop; 37 38 obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 39 40 }); 41 //瀏覽器有滾動條時的操作、 42 $(window).scroll(function() { 43 screenWidth = $(window).width(); 44 screenHeight = $(widow).height(); 45 scrolltop = $(document).scrollTop(); 46 47 objLeft = (screenWidth - obj.width())/2 ; 48 objTop = (screenHeight - obj.height())/2 + scrolltop; 49 50 obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); 51 }); 52 53 } 54 //確定取消的操作 55 function check(obj, obj1, obj2) { 56 obj1.click(function() { 57 obj.remove(); 58 closed($('.mask'), $('.mess')); 59 }); 60 obj2.click(function() { 61 closed($('.mask'), $('.mess')); 62 }) ; 63 } 64 // 隱藏 的操作 65 function closed(obj1, obj2) { 66 obj1.hide(); 67 obj2.hide(); 68 } 69 70 }); 71 </script> 72 </head> 73 <body> 74 <input type="button" class="btn" value="btn"/> 75 <div>彈出確認框始終位於窗口的中間位置的測試</div> 76 <div class="mask"></div> 77 <div class="mess"> 78 <p>確定要刪除嗎？</p> 79 <p><input type="button" value="確定" class="btn1"/> 80 <input type="button" value="取消"class="btn2"/></p> 81 </div> 82 </body> 83 </html>
轉載自：http://www.cnblogs.com/web-ed2/archive/2011/09/28/2194861.html