疊加框出現在屏幕中央

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這樣的插件，這樣的事情非常簡單。