博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
弹出框始终保持居中(包括有滚动条和窗体缩放时)
阅读量:5024 次
发布时间:2019-06-12

本文共 439 字,大约阅读时间需要 1 分钟。

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

原理很简单:

获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的。有了这个,可以计算出来横向居中和垂直居中的坐标。但是滑动了滚动条怎么依然横向居中和垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度和横向滚动条移动的宽度,加到刚刚的y轴坐标即可。

$(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚。

最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间。

效果体验:

弹出确认框始终位于窗口正中央
弹出确认框始终位于窗口的正中央

确定要删除吗?

转载于:https://www.cnblogs.com/wangzhuxing/p/7988502.html

你可能感兴趣的文章
软工作业3:用户体验分析——以“南通大学教务管理系统微信公众号”为例
查看>>
Css:背景色透明,内容不透明之终极方法!兼容所有浏览器
查看>>
我们前端跟后端是怎么合作的
查看>>
mysql存储过程
查看>>
洛谷P2556 [AHOI2002] 黑白图像压缩 [模拟]
查看>>
letecode [136] - Single Number
查看>>
linux下设置固定IP的方法
查看>>
VMware虚拟机下Linux系统的全屏显示
查看>>
net core体系-web应用程序-4asp.net core2.0 项目实战(任务管理系统)-2项目搭建
查看>>
高效的jQuery
查看>>
ubuntu 16.04 (软件应用)-输入法
查看>>
windos7修复引导扇区
查看>>
Leetcode总结之Backtracking
查看>>
Android开发学习之路-图片颜色获取器开发(1)
查看>>
StackExchange.Redis 官方文档(一) Basics
查看>>
nupkg 之破解 nodejs+electron-packager 打包exe的解包
查看>>
Objective-C 使用 C++类
查看>>
浅谈之高级查询over(partition by)
查看>>
Notes: CRM Analytics–BI from a CRM perspective (2)
查看>>
graphite custom functions
查看>>