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

叠加框出现在屏幕中央

3 个答案: