屏幕中央出现的覆盖框

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

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

感谢您的任何帮助。

- Wen

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应分别为盒子宽度和高度的负一半。

- Sarfraz

---

如果你希望该盒子随着滚动而移动，可以将position属性设置为fixed。 - redburn

Answer 2

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

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

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

转换行会为您计算出宽度和高度。

- C Thompson

Answer 3

在内容加载后，您应该能够获取元素的宽度和高度（尝试使用jquery助手 - width(), height()）。一旦您获得了尺寸，就可以进行计算，然后定位元素。您还可以在定位完成之前将元素隐藏起来，以免用户看到跳动。您还可以使用像fancybox这样的插件，使这些操作变得非常简单。

- RDL