Javascript 显示在屏幕中央的覆盖框

我有一些JS代码，可以将背景淡入深色，并打开一个白色模式窗口，如下所示：

function open_litebox(link) {
    var overlay_black = 'position:absolute;top:0%;left:0%;width:100%;height:100%;background:black;z-index:1001;opacity:0.5;';
    $('body').append('<div style="' + overlay_black + '"></div>');
    var overlay_white = 'position:absolute;top:25%;left:25%;padding:5px;background-color:white;z-index:1002;overflow:auto;';
    $('body').append('<div style="' + overlay_white + '"><p>heeeyyy</p></div>');
}

函数打开文本框（链接）{
var overlay_black='位置：绝对；顶部：0%；左侧：0%；宽度：100%；高度：100%；背景：黑色；z指数：1001；不透明度：0.5；'；
$（'body'）。追加（''）；
var overlay_white='位置：绝对；顶部：25%；左侧：25%；填充：5px；背景色：白色；z索引：1002；溢出：自动；'；
$（'body'）。追加（'heeeyy
'）；
}

但问题是，它不会出现在屏幕的死角。我希望模态窗口在垂直和水平方向上都位于死点，但我不知道模态窗口内内容的宽度/高度是多少，因此无法设置固定值

---

感谢您的帮助，干杯。

您应该能够在加载内容后获得元素的宽度和高度（请尝试使用该元素的帮助程序-，）

获得尺寸后，即可进行计算，然后定位图元。您还可以隐藏该元素，直到完成定位，以便用户不会看到跳跃

---

您还可以使用这样的插件，使类似的事情变得非常简单。

您需要使用这些样式来使白色覆盖层显示为死点：

var overlay_white = 'position:absolute;
                     top:50%;
                     left:50%;
                     background-color:white;
                     z-index:1002;
                     overflow:auto;
                     width:400px;
                     height:400px;
                     margin-left:-200px;
                     margin-top:-200px';

---

因此应指定

位置

。顶部的

和左侧的
应该是
50%
。左侧的
边距
和顶部的
边距
应分别为方框宽度和高度的负一半
 我知道这是一个老问题，但它是在我用谷歌搜索主题时出现的，我想提供一个更新的答案

扩展Sarfraz的答案，您不需要明确指定宽度和高度。如果这些参数未知（或您不想设置它们），可以在样式中使用以下参数：

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

转换线为您计算宽度和高度。
如果您希望滚动时框移动，请将
位置设置为
固定。