如何在屏幕中央打开弹出窗口？
如何在屏幕中央打开弹出窗口？
提问于 2019-10-29 19:48:46
我使用以下代码在关闭另一个弹出窗口后打开一个弹出窗口：
function closeDeleteFilePopup() {
$('#overlay_form_deleteGenFile').fadeOut(100, function completefadeOutCallback() {
$('#overlay_form_uploadGenFile').fadeIn(100);
positionPopupForFileSection();
});
}我的定位方法是：
function positionPopupForFileSection() {
var popup = $('.overlay_form:visible');
popup.css({
marginLeft: -(popup.outerWidth() / 2),
top: ($(window).height() > popup.outerHeight() ? ($(window).height() - popup.outerHeight()) / 2 : 20),
marginTop: $(window).height() / 2
});它不能在屏幕中间打开弹出窗口。我只想与滚动页面无关，只需在屏幕中央打开弹出窗口。
我该怎么做呢？
回答 3
Stack Overflow用户
发布于 2019-10-29 19:59:09
marginLeft应该是窗口/屏幕的宽度减去弹出窗口的宽度。
marginLeft: (window.innerWidth / 2) - (popup.outerWidth() / 2)(window.innerWidth / 2) -弹出窗口的x将首先位于屏幕中心
- (popup.outerWidth() / 2) -我们减去弹出窗口的宽度，这样x就会调整，使它看起来像锚定在中间。
Stack Overflow用户
发布于 2019-10-29 20:01:05
将此css应用于弹出窗口(容器)。
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);Stack Overflow用户
发布于 2019-10-29 20:01:21
使用CSS做得更好，看看我的解决方案，它是绝对垂直/水平居中的通用解决方案，这取决于你使用JS还是CSS
function positionPopupForFileSection() {
var popup = $('.overlay_form');
popup.css({
'top': '50%',
'left': '50%',
'transform': 'translate3d(-50%, -50%, 0)'
});
}
positionPopupForFileSection();body {
width: 400px;
height: 400px;
background: #eee;
}
.overlay_form {
width: 200px;
height: 200px;
background: crimson;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay_form"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58606875
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号