gpt4 book ai didi

javascript - 无论屏幕分辨率如何,如何使 javascript css 弹出式 div 居中?

转载 作者:可可西里 更新时间:2023-11-01 01:45:09 25 4
gpt4 key购买 nike

我有以下代码可以在禁用背景的同时打开一个新的弹出窗口,问题是我必须将其放置在距离顶部 100px 的位置(已经通过 CSS #dialog 获得)并且位于中心屏幕的大小,无论用户的分辨率是多少?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5
}

#dialog {
display: none;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
border: 1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
My Dialog Content
<br><input type="text">
<br><input type="button" value="Submit">
<br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
<a href="#" onclick="showPopUp('dialog');">Show</a>

</body>
</html>

最佳答案

基于 CSS 居中解决方案:

你需要使用这些样式来让它看起来死点:

position:absolute;
top:50%;
left:50%;
width:400px; /* adjust as per your needs */
height:400px; /* adjust as per your needs */
margin-left:-200px; /* negative half of width above */
margin-top:-200px; /* negative half of height above */

所以应该指定positiontopleft 应该是 50%margin-leftmargin-top 应该分别是框的宽度和高度的负二分之一。

请注意,如果您希望即使在页面滚动时弹出窗口也显示在中心位置,您将不得不使用 position:fixed 而不是它在 IE6 中不起作用的缺点。

关于javascript - 无论屏幕分辨率如何,如何使 javascript css 弹出式 div 居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11021766/

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