jquery的彈出提示框位置居中

2021-06-20 19:20:16 字數 812 閱讀 4173

基於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可以根據需要修改

例項**  

"button" class="btn" value="btn"/>   

彈出確認框始終位於視窗的中間位置的測試

"mask">

"mess">   

確定要刪除嗎?

"button" value="確定" class="btn1"/>   

"button" value="取消"class="btn2"/>

JQuery定時自動消失提示框 彈出框

在表單提交中,不論成功與否,好的體驗都應該有彈出提示,效果 在頁面 顯示提示,1.5秒後消失,不影響頁面的正常布局。html 顯示提示內容,放在頁面中任何位置。alert alert success alert info alert warning alert danger 首先,載入jquery,...

彈出提示框,對話方塊

還在繼續jeecg 所以彈出的對話方塊是lhgdialog 在對話方塊1中有乙個按鈕,點選它希望能再跳出乙個dialog對話方塊 在點選的方法裡寫到 zindex控制在幾層 意思就是 如果不寫,在lhgdialog中,新彈出的對話方塊2就不能出現在對話方塊1的前面,只有對話方塊1關閉或移走才能發現對...

jquery彈出提示框,背景變暗不能編輯

bgdiv thick1 thick1 thick2 thick3 thick4 thick1 msg thick1msg left thick1msg right thick1msg right p thick1msg sure button1 thick2msg left thick2 使用者不...