如果调整高度，模式弹出窗口以适合浏览器视图

我已经去了这个教程做一个模态弹出窗口，它似乎非常适合我需要做的事情。 但是，我想知道是否有人可以帮我弄清楚我需要计算什么来更改对话框，以便在您调整浏览器大小时它会跟随。 本教程很好，因为如果您调整浏览器的大小（宽度方向），则框将跟随并进入中间。 但如果它是高度方面，它不会。

教程： 这里

我认为它与这些代码有关：

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