L'actualisation de jquery ui dialog position

Je suis en utilisant jquery boîte de dialogue.
Le contenu de cette boîte de dialogue est dynamique, de sorte que le changement de la hauteur lorsque la boîte de dialogue est ouverte.

$("#a_div").dialog({ width: 400 });

La boîte de dialogue qui apparaît initialement dans le centre de la page. mais quand le changement de la hauteur n'est pas plus centre.

Comment puis-je actualiser la boîte de dialogue position sans le fermer et le rouvrir?

grâce

OriginalL'auteur Luca Romagnoli | 2011-03-28

  1. 22

    Vous avez besoin de re-régler la position en faisant:

    $("#a_div").dialog({
    position: { 'my': 'center', 'at': 'center' }
});

    La position est définie une fois lors de la création de la boîte de dialogue, mais peut être modifiée par la suite (ou tout simplement re-réglé à la même valeur, jQuery forcer à recalculer).

    Voir cette démo: http://jsfiddle.net/petermorlion/3wNUq/2/

    Le formulaire de Chaîne de position est obsolète. Vous devez utiliser position: { my: "center", at: "center", of: window } à la place.
    n'hésitez pas à ajouter les meilleures pratiques en vigueur à la solution! 🙂
    Pour moi, l'ajout de window à la fin a fait le tour: $("#a_div").dialog({position: { 'my': 'center', 'at': 'center', of: window }});

    OriginalL'auteur William Niu

  2. 1

    Vous pouvez essayer de redimensionner la boîte de dialogue à l'aide de ses classes en JQuery directement (la documentation ici)

    La structure de base de JQueryUI Dialogue est-ce:

    <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

    Alors, peut-être que vous devriez jouer avec des classes de largeur et de hauteur pour définir le meilleur.

    Une autre solution est de mettre de la boîte de dialogue largeur directement avant de l'ouvrir (lors de vos données est chargé avec succès):

    $("#a_div").dialog({ width: 400 });

$.get('my_url.php',function(data){

   $('#a_div .ui-dialog').css('width','400px');

   //Or...

   $('#a_div').css('width','400px');
});

    J'espère que cela vous aide.

    OriginalL'auteur Fran Verona

  3. 1

    Si vous souhaitez utiliser la position exacte des paramètres utilisés par jquery ui pour le positionnement initial, vous pouvez récupérer les options de l'interface utilisateur de jquery code et de les utiliser à tout moment vous souhaitez repositionner votre boîte de dialogue.

    function refreshDialogPosition(id) {
    $("#" + id).position({
                        my: "center",
                        at: "center",
                        of: window,
                        collision: "fit",
                        //Ensure the titlebar is always visible
                        using: function (pos) {
                            var topOffset = $(this).css(pos).offset().top;
                            if (topOffset < 0) {
                                $(this).css("top", pos.top - topOffset);
                            }
                        }
                    });
}

    Utilisation:

    refreshDialogPosition("YourDialogId");

    Ce sera aussi assurez-vous que votre barre de titre est toujours visible. Sinon, votre barre de titre sera à l'extérieur de votre écran lors de l'utilisation de boîtes de dialogue avec les grands de contenu. (contenu de la hauteur > hauteur de la fenêtre)

    Avoir une belle journée.

    OriginalL'auteur ThdK