扫码关注官方订阅号
问题:如何在任意分辨率下,我点击任何地方,弹窗始终对于当前浏览器窗口居中
因为上传不了图片,描述得不太清楚,还是希望大神能解答我。
问题已经解决了,我的目的是弹窗始终对于浏览器窗口居中,居然忘了最重要的position:fixed
学习是最好的投资!
竟然要用js..$(selector).show().css({
"position":"fixed", "top":"0", "bottom":"0", "left":"0", "right":"0", "margin":"auto",
})//推荐css的好
css就可以搞定,而且兼容性很好。css代码如下:
.box{width:100px;height:100px;background:red;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto auto;}
弹窗也是个p或者别的容器吧?为了方便手写了一段JQ,要JS原生的话自己写就好了
function toMiddle() { var item = $('弹窗'), itemWidth = parseInt(item.css('width')), // 弹窗的宽度是一个固定的值 itemHidth = parseInt(item.css('height')), // 弹窗的高度是一个固定的值 wrapWidth = parseInt($('容器/窗口').css('width')); // 获取当前容器宽度,容器可以是窗口,也可以是一个填满窗口的标签等,因为放在resize里了,会自动更新 wrapHeight = parseInt($('容器/窗口').css('height')); item.css({ 'left': (wrapWidth - itemWidth) / 2 + 'px',// 弹窗相对于容器横向居中 'top': (wrapHeight - itemHeight) / 2 +'px'// 弹窗相对于容器垂直居中 }) } $(window).resize(function() { toMiddle();//窗口缩放时 }); toMiddle();//窗口打开时初始状态时
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
竟然要用js..
$(selector).show().css({
})
//推荐css的好
css就可以搞定,而且兼容性很好。css代码如下:
弹窗也是个p或者别的容器吧?
为了方便手写了一段JQ,要JS原生的话自己写就好了