我有以下代码在禁用背景时打开一个新的弹出窗口，问题是我必须将它定位为从顶部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>
答案 0 :(得分：38)
基于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 */
因此应指定position。 top和left应为50%。 margin-left和margin-top应分别为框的宽度和高度的一半。
请注意，如果您希望弹出窗口显示在中心，即使页面滚动，您也必须使用position:fixed代替回退，它在IE6中不起作用。
答案 1 :(得分：3)
您需要的是一个灯箱。
要创建它，您应该修改HTML，CSS和JS代码。
假设您的灯箱仅包含字符串“登录表单”。 （你可以把你想要的一切都放在那里）HTML代码应如下所示：
<div id = "loginBox">login form</div>
现在，我们需要用CSS隐藏它：
div#loginBox {
display: none;
}
现在我们的盒子不可见了。让我们修改我们的框，因为你希望它从顶部100px：
div#loginBox {
display: none;
top: 100px;
}
我们会担心以后会禁用后台。
我们的下一个工作是制作一个按钮，在需要时显示该框。易于peasy：
<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>
请注意，我们不需要“href”属性，因为这会在点击和其他不需要的行为上移动屏幕。
让我们通过JS附加按钮上的事件处理程序：
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
document.getElementsById("loginBox").style.display = "inline-block"; // or "inline"
}
window.onload = function() {
var login_box = document.getElementsById("loginBox");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
}
}
但是你希望它在屏幕的中心？然后功能如下：
function display_box() {
var theBox = document.getElementsById("loginBox").style,
left = document.width / 2 - 50; // 150 because it is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
}
我猜你会想要在某个时刻关闭窗口并使“禁用背景”效果。为此，你可以创建一个在整个屏幕上扩展的div类，在其上附加一个“display”事件，在css中放入一些z-index以确保loginBox超过“禁用的背景”，并附加一个“关闭“background”div上的loginBox“事件。现在最终的代码看起来像这样：
请注意，我们只关心登录按钮的位置，因为另一个在视图中隐藏，然后由JS修改：
HTML：
<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>
CSS：
div#loginBox {
display: none;
top: 100px;
width: 300px; #it is important to know the width of the box, to center it correctly
z-index: 2;
}
div#backgroundDarkener {
background: #000;
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
# needless to say, you should play with opacity or if you want your
# css to validate - background image (because I suspect it won't
# validate for old versions of IE, Safari, etc.) This is just a suggestion
}
JS：
var IE = document.all ? true : false; // obligatory "browser sniffing"
function display_box() {
var theBox = document.getElementsById("loginBox").style,
background = document.getElementsById("loginBox").style,
left = document.width / 2 - 150; // 150 is 300 / 2
theBox.display = "inline-block";
theBox.left = left.toString() + "px";
background.display = "inline-block";
}
function hide_box() {
document.getElementsById("loginBox").style.display = "none";
document.getElementsById("backgroundDarkener").style.display = "none";
}
window.onload = function() {
var login_box = document.getElementsById("loginBox"),
background = document.getElementsById("backgroundDarkener");
if (!IE) {
login_box.addEventListener( "click", display_box , false );
background.addEventListener( "click", hide_box , false );
}
else {
login_box.attachEvent( "onclick", display_box );
background.attachEvent( "onclick", hide_box );
}
}
答案 2 :(得分：2)
快速Google搜索this;
function PopupCenter(pageURL, title,w,h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
}
答案 3 :(得分：2)
现在这就是flexbox救援的地方！
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}
答案 4 :(得分：1)
您需要使用这些样式来制作div中心：
width:500px;
left:0;
right:0;
margin:0 auto;
答案 5 :(得分：1)
这样做：
.body {
position: relative;
}
.popup {
position: absolute;
max-width: 800px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
屏幕或弹出窗口大小无关紧要。这将使<div class="popup"></div>。
答案 6 :(得分：0)
简单，margin: 100px auto;。没有必要在JavaScript中进行计算。
<强> Live Example