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

原理很簡單：

獲取當前屏幕(窗體)的寬度和高度，因為不同瀏覽器的窗體大小是不一樣的。有了這個，可以計算出來垂直居中的坐標。但是滑動了滾動條怎么依然垂直居中呢？這個時候就要獲取當前窗體距離頁面頂部的高度，加到剛剛的y軸坐標即可。

$(document)是獲取整個網頁的，$(window)是獲取當前窗體的，這個要搞清楚。

最后把獲取的坐標賦給窗體即可，窗體本身是絕對定位的，所以自然可以到窗體中間。

具體代碼：

復制代碼 代碼如下:

彈出確認框始終位于窗口的中間位置的測試

.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; }

$(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();

}

});

彈出確認框始終位于窗口的中間位置的測試

確定要刪除嗎？

相關閱讀:

MySQL的中文UTF8亂碼問題

郵件傳輸原理及相關入門知識概述

封裝數據庫操作,Javabean給數據庫瘦身

給php新手談談我的學習心得

Sybase教程：復制與熱切換數據

通過具體程序來理解PHP里面的抽象類

信使(iptux)：Linux下的飛鴿傳書

Windows系統的鼠標拖放操作的技巧

php中的觀察者模式

SPAN和DIV,Class與ID的區別匯總

Windows和Linux程序并存同一桌面

ADO.NET 數據集中瀏覽多個相關表 1

MySQL性能設置

Javascript學習筆記:錯誤處理

總結

以上是生活随笔為你收集整理的php alert弹出框位置,jQuery_基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果），原理很简单： 获取当前屏幕（ - phpStudy...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。