叠加框出现在屏幕中央

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这样的插件，这使得这样的事情变得非常简单。