自动调整大小的弹出窗口答案

【问题标题】：Auto-resize popup window自动调整大小的弹出窗口
【发布时间】：2013-09-04 06:49:22
【问题描述】：

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

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

这里的问题是 - 我们如何自动调整弹出窗口的大小，以便它自己调整大小（基于内容），从而在所有情况下都避免滚动条。

一个粗略的选择是获取可以出现在窗口中的所有可能视图的最大大小，并始终（预先）将其设置为窗口的大小，即类似于 (W+w)x(L+l ）。但是，这并不理想/不可取，因为某些视图中没有太多内容，并且在弹出窗口较大时会显得很尴尬。

【问题讨论】：

你可以设置正常屏幕的最小和最大高度。如果超过你可以动态计算并设置高度。高度应该是自动的就可以了

标签： java javascript html window

【解决方案1】：

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

【讨论】：