javascript - 如何用js控制弹窗居中
PHPz
PHPz 2017-04-10 17:56:38
[JavaScript讨论组]

问题:如何在任意分辨率下,我点击任何地方,弹窗始终对于当前浏览器窗口居中


因为上传不了图片,描述得不太清楚,还是希望大神能解答我。


问题已经解决了,我的目的是弹窗始终对于浏览器窗口居中,居然忘了最重要的position:fixed

PHPz
PHPz

学习是最好的投资!

全部回复(3)
大家讲道理

竟然要用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();//窗口打开时初始状态时
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号