javascript - 无论分辨率如何，让内联 HTML/JavaScript 弹出窗口出现在屏幕中间

Question

我正在使用以下 Javascript 和 CSS 来创建弹出窗口:

<script type="text/javascript">
    Sys.debug = true;
    var popup;
    Sys.require(Sys.components.popup, function () {
        popup = Sys.create.popup("#popup", {
            parentElementID: "target",
        });
    });
    var popup2;
    Sys.require(Sys.components.popup, function () {
        popup2 = Sys.create.popup("#popup2", {
            parentElementID: "target",
        });
    });
</script>

#popup
{
    width: 400px;
    height: 250px;
    overflow: scroll;
    background-color: #EAFDB3;
    border: solid 2px black;
}
#popup2
{
    width: 400px;
    height: 250px;
    background-color: #EAFDB3;
    border: solid 2px black;
}

这些弹出窗口出现的位置完成了:

 <span id="target" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;"></span>

弹出窗口的内容介于:

<div id="popup" style="background: #EAFDB3; color: #000; padding: 15px; margin: 0px">CONTENT </div>

无论分辨率如何，我怎样才能让这个弹出窗口在屏幕中间弹出？

Answer 1

设置顶部为 50%，左侧为 50%。然后有一个负的左边距，它是弹出窗口宽度的一半，负的上边距是弹出窗口高度的一半。你所拥有的似乎很接近......

但是给定大小为 400x250 的弹出窗口，margin-top 应该是 -125px，margin-left 应该是 -200px。