0

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

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

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

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

4

1 回答 1

0

工作演示

$(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();
});
于 2013-09-04T07:00:39.647 回答