Comment centrer automatiquement la boîte de dialogue jQuery UI lors du redimensionnement du navigateur?

Question

Lorsque vous utilisez jquery UI dialog, tout fonctionne bien, sauf pour une chose. Lorsque le navigateur est redimensionnée, le dialogue reste dans sa position initiale qui peut être vraiment ennuyeux.

Vous pouvez le tester sur: http://jqueryui.com/demos/dialog/

Cliquez sur "boîte de dialogue modale" exemple et de redimensionner votre navigateur.

J'aimerais être en mesure de laisser les boîtes de dialogue auto-center lorsque le navigateur est redimensionnée. Cela peut être fait de manière efficace pour toutes mes boîtes de dialogue dans mon application?

Merci beaucoup!

Answer 1

Réglage de l' position option force le présent, donc il suffit d'utiliser le même sélecteur couvrant tous vos dialogues où je l'utiliser #dialog ici (si il ne les trouve pas aucune action n'est prise, comme tous jQuery):

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Ici le même jQuery UI page de démonstration en ajoutant simplement le code ci-dessus, nous sommes juste de l'ajout d'un gestionnaire de la fenêtre de l' resize événement avec .resize(), de sorte qu'il déclenche la re-centrer au moment opportun.

Answer 2

Alternativement à la réponse d'Ellesedil,

Cette solution n’a pas fonctionné pour moi tout de suite, j’ai donc fait ce qui suit, qui est aussi une version dynamique mais raccourcie:

 $( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});
 

+1 pour Ellesedil cependant

MODIFIER:

Version beaucoup plus courte qui fonctionne très bien pour les dialogues simples:

 $(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});
 

Il n'est pas nécessaire que .each () soit utilisé si vous avez des dialogues uniques que vous ne voulez pas toucher.

Answer 3

Plus de réponse complète, qui utilise le Pseudo de répondre de manière plus flexible peut être trouvé ici.

Le code de la pertinence de ce thread est ci-dessous. Cette extension essentiel de créer un dialogue nouveau paramètre appelé autoReposition qui accepte une valeur vrai ou faux. Le code écrit les valeurs par défaut de l'option à true. Mettre cela en un .fichier js dans votre projet, afin que vos pages peut en tirer profit.

    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            var dialog = $(this).data("dialog");
            if (dialog.options.autoReposition) {
                dialog.option("position", dialog.options.position);
            }
        });
    });

Cela vous permet de fournir une "vrai" ou "faux" pour ce nouveau paramètre lorsque vous créez votre boîte de dialogue sur votre page.

$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

Maintenant cette boîte de dialogue sera toujours de se repositionner. AutoReposition (ou ce que vous appelez le réglage) peut gérer toutes les boîtes de dialogue qui n'ont pas de position par défaut et automatiquement les repositionner lorsque la fenêtre est redimensionnée. Depuis que vous créez lorsque vous créez la boîte de dialogue, vous n'avez pas besoin d'identifier un dialogue en quelque sorte parce que le repositionnement de la fonctionnalité sera intégrée dans la boîte de dialogue elle-même. Et la meilleure partie est que, puisqu'il est défini par boîte de dialogue, vous pouvez avoir certains dialogues se repositionner et d'autres restent là où ils sont.

De crédit de l'utilisateur scott.gonzalez sur le jQuery forums pour l'ensemble de la solution.

Answer 4

Voici une autre option réservée aux CSS qui fonctionne. Les marges négatives doivent être égales à la moitié de votre hauteur et de la moitié de votre largeur. Donc, dans ce cas, ma boîte de dialogue mesure 720 pixels de large sur 400 pixels de haut. Cela le centre verticalement et horizontalement.

 .ui-dialog {
  top:50% !important;
  margin-top:-200px !important; 
  left:50% !important;
  margin-left:-360px !important
}