彈出框始終保持居中(包括有滾動條和窗體縮放時)

2022-05-18 17:03:56 字數 910 閱讀 3874

之前寫的**,都是在當前視窗位於居中,可是一旦視窗縮小或者放大都不是位於居中的位置了,但是一直想寫的乙個類似於alert彈出視窗的效果。

原理很簡單:

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

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

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

效果體驗:

"button

"class="

btn" value="

btn" style="

margin-top:2500px; margin-left:800px;

"/>

"height:3000px; width:3000px;

">彈出確認框始終位於視窗的正**

class="

mask

">

class="

alertbox

">

確定要刪除嗎?

"button

" value="確定"

class="

btn1

"/>

"button

" value="取消"

class="

btn2

"/>

其實,事實上,無意之間還想到乙個比較好的解決方案,就是這個彈出框用固定定位position=『fixed』,然後left和top各定位50%。就會實現上面辣麼多jquery**實現的效果。

如何讓視窗始終保持在最前面

如何讓視窗始終保持在最前面 飄飄白雲 20090110 問題 讓目標視窗始終保持在最前面,無論這個視窗是模式的還是模式的。思路 取得當前最前面視窗的title,如果title不是與目標視窗的title不相同 說明目標視窗不是在最前面 列舉視窗,找到目標視窗,設定它為最前面。說話 static wch...

C 中始終保持有序的泛型集合

在system.collections.generic命名空間下面的泛型集合sortedset,對於經常需要排序的需求來說是很好用的了。集合中的資料始終處於乙個有序狀態,同時還不會影響效能。下面用乙個int型別的集合來進行例項說明 class program console.writeline li...

元素 居中 彈出框

方法1 table cell html結構 box box1 垂直居中 span div css box1 方法2 display flex.box2 方法3 絕對定位和負邊距.box3 box3 span 方法4 絕對定位和0.box4 span 這種方法跟上面的有些類似,但是這裡是通過margi...