叠加框出现在屏幕中央

Question

我有一些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>');
}

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

欢迎任何帮助，欢呼。

Answer 1

您需要使用这些样式使白色叠加显示为死点 ：

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';

所以应该指定position 。 top和left应为50% 。 margin-left和margin-top应分别为框的宽度和高度的负半边。

Answer 2

我知道这是一个古老的问题，但是当我在谷歌上搜索这个主题时，我想提供一个更新的答案。

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

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

变换线为您计算宽度和高度。

Answer 3

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

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

您还可以使用像fancybox这样的插件，这样的事情非常简单。