模態彈出窗口，以適應瀏覽器視圖，如果調整大小高度

Question

我已經去這個教程來做一個模式彈出窗口，它似乎是我需要做的很好。然而，我想知道如果有人能幫我弄清楚我需要計算什麼來改變對話框，所以無論你什麼時候調整瀏覽器的大小。本教程是很好的，因爲如果您調整瀏覽器的大小（寬度方向），框會跟着進入中間。但是，如果它是高度明智的，它不會。

教程：Here

我想它做這些代碼：

// get the screen height and width 
var maskHeight = $(document).height(); 
var maskWidth = $(window).width(); 

// calculate the values for center alignment 
var dialogTop = (maskHeight/3) - ($('#dialog-box').height()/3); 
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

// assign values to the overlay and dialog box 
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show(); 
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show(); 

我試着使用$（窗口）.height（），但我不認爲那也可以。我試圖模仿寬度樣式，因爲那個樣式可行，但它似乎不適用於高度？有人可以幫我弄這個嗎？

謝謝！

Answer 1

試試這個

工作demo。您可以調整窗口大小並嘗試將該對話框自動置於中間位置。

$(function(){ 
    $(window).resize(function(){ 
    // get the screen height and width 
    var maskHeight = $(window).height(); 
    var maskWidth = $(window).width(); 

    // calculate the values for center alignment 
    var dialogTop = (maskHeight - $('#dialog-box').height())/2; 
    var dialogLeft = (maskWidth - $('#dialog-box').width())/2; 

    // assign values to the overlay and dialog box 
    $('#dialog-overlay').css({ height:$(document).height(), width:$(document).width() }).show(); 
    $('#dialog-box').css({ top: dialogTop, left: dialogLeft, position:"fixed"}).show(); 
    }).resize(); 
});