Fenêtre contextuelle de redimensionnement automatique

Question

J'ai une fenêtre contextuelle lancée avec une dimension WxL, où W = largeur et L = longueur.

Le contenu correspond bien dans ce domaine pour quelques écrans. Cependant, dans certains cas (vues qui apparaissent conditionnellement), la taille de la fenêtre n'est pas assez grande et finit par afficher une barre de défilement.

La question ici est - Comment pouvons-nous ajuster automatiquement la taille de la fenêtre contextuelle afin qu'elle se redimensionne elle-même (en fonction du contenu), et donc éviter la barre de défilement dans tous les cas. Une option brute consiste à obtenir la taille maximale de toutes les vues possibles qui peuvent apparaître dans la fenêtre et toujours (pré) définir comme la taille de la fenêtre, c'est-à-dire quelque chose comme (W + w) x (L + l). Cependant, ce n'est pas idéal/préférable, car certaines vues n'ont pas beaucoup de contenu et sembleraient gênantes avec une taille de popup plus grande.

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