疊加框出現在屏幕

我有變淡的背景，深色，並打開一個白色模式窗口，像這樣一些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>'); 
}

但問題是，這不是」 t在屏幕上顯示死點。我希望模態窗口在垂直和水平方向都位於死點，但我不知道模態窗口內的內容的寬度/高度是什麼，所以我不能設置固定值。

任何幫助表示讚賞，歡呼聲。

來源

2010-11-22 Wen

內容加載後，你應該能夠得到一個元素的寬度和高度（建議使用jquery助手爲 - width()，height()）

一旦你的尺寸，然後計算可能發生，然後定位元素。您也可以將元素隱藏，直到定位完成，以便用戶看不到跳動。

你也可以使用像fancybox這樣的插件，這樣做很簡單。

來源

2010-11-22 20:55:27 RDL

你需要使用這些樣式，讓您的白色覆蓋出現止點：

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應分別爲框的寬度和高度的一半。

來源

2010-11-22 20:55:48 Sarfraz

如果您希望框在滾動時移動，請將「位置」設置爲「固定」。 – redburn 2013-10-24 12:18:35

我知道這是一個古老的問題，但它出現在我使用Google的主題時，我想提供一個更新的答案。

在Sarfraz的答案上展開，你不需要明確指定寬度和高度。如果這些都是未知數（或者你不想設置），你可以使用你的造型以下內容：

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

變換線計算出的寬度和高度爲您服務。

來源

2016-08-05 07:59:35

疊加框出現在屏幕

回答

相關問題