gpt4 book ai didi

javascript - 如何使用 Javascript 居中对齐弹出 div

转载 作者:可可西里 更新时间:2023-11-01 02:17:56 24 4
gpt4 key购买 nike

如何使用 javascript 将弹出窗口对齐到监视器/屏幕的中心?

我尝试使用 screen.width 和 screen.height 来居中。但是该部门垂直于滚动页面的中心对齐

在此先感谢您的任何帮助和建议

最佳答案

试试这个:

<div id="popup" class="popup">
This a vertically and horizontally centered popup.
</div>

<a onclick="showPopup('popup');">Show Popup</a>

<style type="text/css">
.popup {
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
display:none;
}
</style>

<script type="text/javascript">
function showPopup(id) {
var popup = document.getElementById(id);
popup.style.display = 'block';
}
</script>

CSS 解释:div 是 200x100,你将它定位在距顶部 50% 和距左侧 50% 的位置,但要使其完全居中,你需要从 50% 的值中减去宽度和高度的一半,方法是使用负边距,因此 margin-top 应该是 height/2 的负值,margin-left 应该是 width/2 的负值。

关于javascript - 如何使用 Javascript 居中对齐弹出 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3202583/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com