基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)

2022-01-13,,,,

之前写的代码,都是在当前窗口位于居中,可是一旦窗口缩小或者放大都不是位于居中的位置了,但是一直想写的一个类似于alert弹出窗口的效果。

原理很简单:
获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可。
$(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚。
最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间。
具体代码:
复制代码 代码如下:

弹出确认框<a href="https://kunjuke.com/tag/107649/" title="始终" target="_blank">始终</a>位于窗口的中间位置的测试

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

弹出确认框始终位于窗口的中间位置的测试

确定要删除吗?

以上就是基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)的详细内容,更多请关注本站其它相关文章!

《基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果).doc》

下载本文的Word格式文档,以方便收藏与打印。