Question

我有一个以WxL维度启动的弹出窗口，其中W =宽度，L =长度。

内容非常适合该区域的几个屏幕。但是，在某些情况下（有条件地出现的视图），窗口大小不够大，最终会显示滚动条。

这里的问题是 - 我们如何自动调整弹出窗口大小以使其自身调整大小（基于内容），因此在所有情况下都避免使用滚动条。

一个原始选项是获取窗口内可能出现的所有可能视图的最大大小，并始终（预）将其设置为窗口大小，即（W + w）x（L + l））。然而，这并不理想/不太理想，因为有些视图中没有太多内容，并且弹出窗口大小看起来很尴尬。

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

自动调整弹出窗口的大小

1 个答案: