wake-up-neo.com

Wie zentriert man den jQuery UI-Dialog beim Ändern der Browsergröße automatisch?

Wenn Sie den Jquery-UI-Dialog verwenden, funktioniert alles gut, bis auf eine Sache ... Wenn der Browser die Größe ändert, bleibt der Dialog in seiner ursprünglichen Position, was sehr ärgerlich sein kann.

Sie können es unter folgender Adresse testen: http://jqueryui.com/demos/dialog/

Klicken Sie auf das Beispiel "Modal Dialog" und ändern Sie die Größe Ihres Browsers.

Ich würde gerne in der Lage sein, Dialoge automatisch zentrieren zu lassen, wenn der Browser die Größe ändert. Kann dies auf effiziente Weise für alle meine Dialoge in meiner App durchgeführt werden?

Danke vielmals!

jqueryjquery-uimodal-dialog
97
Jorre

Wenn Sie die Option position festlegen, wird dies erzwungen. Verwenden Sie also denselben Selektor für alle Ihre Dialogfelder, in denen ich #dialog hier verwende (wenn er sie nicht findet, wird keine Aktion ausgeführt, wie bei allen jQuery-Dateien):

jQuery-Benutzeroberfläche vor 1.10

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

jQuery UI 1.10 oder höher

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

Hier ist die gleiche jQuery-UI-Demoseite, die nur den obigen Code hinzufügt , wir fügen dem resize-Ereignis des Fensters lediglich einen Handler mit .resize() hinzu, so dass die Neuzentrierung zum richtigen Zeitpunkt ausgelöst wird . Das

154
Nick Craver

Alternativ zu Ellesedils Antwort:

Diese Lösung hat für mich nicht sofort funktioniert. Also habe ich folgendes gemacht, was auch eine dynamische, aber verkürzte Version ist:

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

+1 für Ellesedil

BEARBEITEN:

Viel kürzere Version, die sich für einzelne Dialoge eignet:

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

Es ist nicht erforderlich, dass .each () verwendet wird, wenn Sie einige eindeutige Dialoge haben, die Sie nicht berühren möchten.

19
Pierre

Eine umfassendere Antwort, die Nicks Antwort flexibler verwendet, ist hier .

Eine Anpassung des relevanten Codes aus diesem Thread ist unten aufgeführt. Diese Erweiterung erstellt im Wesentlichen eine neue Dialogeinstellung mit dem Namen autoReposition, die ein wahr oder falsch akzeptiert. Der Code, wie geschrieben, setzt die Option auf true. Fügen Sie dies in eine .js-Datei in Ihrem Projekt ein, damit Ihre Seiten es nutzen können.

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

Auf diese Weise können Sie für diese neue Einstellung "true" oder "false" angeben, wenn Sie Ihren Dialog auf Ihrer Seite erstellen.

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

Jetzt wird sich dieser Dialog immer neu positionieren. Mit AutoReposition (oder wie auch immer Sie die Einstellung aufrufen) können Sie Dialoge ohne Standardposition bearbeiten und diese automatisch anpassen, wenn die Fenstergröße geändert wird. Da Sie dies beim Erstellen des Dialogfelds festlegen, müssen Sie das Dialogfeld nicht irgendwie identifizieren, da die Neupositionierungsfunktion in das Dialogfeld selbst integriert wird. Und das Beste daran ist, dass, da dies für jeden Dialog festgelegt wird, einige Dialoge sich neu positionieren können und andere dort bleiben, wo sie sind.

Dank an den Benutzer scott.gonzalez in den jQuery-Foren für die vollständige Lösung.

13
Ellesedil

Eine andere nur-CSS-Option, die funktioniert, ist dies. Die negativen Ränder sollten der halben Höhe und der halben Breite entsprechen. In diesem Fall ist mein Dialog also 720px breit und 400px groß. Dies zentriert es vertikal und horizontal.

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

Alternativ kann jQuery ui position verwendet werden,

$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});
2
AkilaI

Hallo zusammen!

Vanilla JS Lösung:

(function() {
  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;

  function resizeThrottler() {
    if (!resizeTimeout) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
      }, 66);
    }
  }

  function actualResizeHandler() {
    $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window });
  }
}());
0
Alexandr Kazakov