Maintenir un centre de dialogue avec un contenu dynamique

Question

J'aurais un dialogue avec ce qui suit

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    title:"Check Order Status",
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});

Lorsque l'utilisateur clique sur le bouton de recherche, le système exécute Ajax et renvoie les commandes à la boîte de dialogue, qui est redimensionnée dynamiquement, mais la boîte ne s'étend que vers le bas. Y a-t-il un moyen de faire en sorte que la boîte s'étende vers le haut et vers le bas tout en restant centrée ?

De plus, si le contenu est suffisant, il peut potentiellement dépasser les limites de la page. Je pense donc pouvoir utiliser une hauteur maximale pour éviter cela, mais que dois-je faire s'ils redimensionnent la fenêtre ?

J'ai essayé d'ajouter maxHeight : 500, mais cela ne l'a pas empêché de sortir du bas.

Answer 1

Vous avez un code qui place le dialogue au milieu de l'écran, je présume ? Exécutez-le après qu'il ait été rempli avec de nouvelles informations.

Écrivez un nouveau code qui assure que la boîte n'est pas plus haute que la fenêtre. Si c'est le cas, définissez la hauteur de la boîte de dialogue à la hauteur de la fenêtre (ou moins si vous voulez un rembourrage), et définissez le code suivant overflow à scroll . Exécutez ce code chaque fois qu'ils redimensionnent la fenêtre également.

Answer 2

OK, j'ai réussi à le faire fonctionner, pas à 100%, mais presque.

J'ai réglé la position sur 'top' puisque auto s'étend toujours vers le bas. Puis j'ai ajouté une fonction ouverte comme suggéré dans un billet comme solution de rechange pour obtenir autoHeight de respecter maxHeight .

Cela dit, je voulais vraiment utiliser la hauteur du corps, et non le document, et je ne sais pas pourquoi j'ai dû soustraire 200 de cette valeur ?

$("#statusbox").dialog({
    autoOpen: false,
    bgiframe: true,
    modal: true,
    width: 'auto',
    height:'auto',
    position: 'top',
    title:"Check Order Status",
    open: function(event, ui) {
        $(this).css({'max-height': $(document).height()-200, 'overflow-y': 'auto'});
    },
    buttons: {
        Find: function() {
            get_status();
        },
        Close: function() {
            $(this).dialog('close');
        }
    }
});