Всплывающее окно с автоматическим изменением размера

Question

У меня есть всплывающее окно, которое запускается с размером WxL, где W = width и L = length.

Содержимое подходит для этой области на нескольких экранах. Однако в некоторых случаях (представления, которые появляются условно) размер окна не достаточно большой и заканчивается показом полосы прокрутки.

Задача здесь - как мы можем автоматически настроить размер окна всплывающего окна, чтобы он изменял размер (на основе содержимого) и, следовательно, во всех случаях избегал полосы прокрутки.

Одна грубая опция заключается в том, чтобы получить максимальный размер всех возможных видов, которые могут появляться в окне, и всегда (предварительно) устанавливать это как размер окна, то есть что-то вроде (W + w) x (L + л). Однако это не идеально/предпочтительнее, поскольку некоторые из них не имеют большого количества контента и выглядят неудобно с большим размером всплывающего окна.

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