модальное всплывающее окно, чтобы поместиться в окне браузера, если изменить размер высоты

Question

Я пошел в этот урок, чтобы сделать модальное всплывающее окно, и это кажется довольно хорошим для того, что мне нужно сделать. Однако мне было интересно, может ли кто-нибудь помочь мне выяснить, что мне нужно рассчитать, чтобы изменить диалоговое окно, чтобы оно появлялось при каждом изменении размера браузера. Этот урок хорош, потому что если вы измените размер браузера (по ширине), поле будет следовать и перейдет в середину. Но если это высота, то не будет.

Учебник: Здесь

Я думаю, что это связано с этими кодами:

    // 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();

Я пытался использовать $ (window) .height (), но я не думаю, что это тоже работает. Я пытался имитировать стили ширины, потому что это работает, но, похоже, не работает с высотой? Может ли кто-нибудь помочь мне с этим?

Спасибо!

Answer 1

Попробуйте это

Рабочая демо .Вы можете изменить размер окна и попробовать автоматически переместить диалоговое окно в центр.

$(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();
});