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

我曾尝试使用$（window）.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();
});

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

1 个答案: