Wie zentriere ich den jQuery UI-Dialog automatisch, wenn ich die Größe des Browsers ändere?

Wenn Sie das Dialogfeld "jquery UI" verwenden, funktioniert alles gut, bis auf eine Sache. Wenn die Größe des Browsers geändert wird, bleibt der Dialog nur in seiner Ausgangsposition, was sehr ärgerlich sein kann.

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

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

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

Vielen Dank!

Wenn Sie die positionOption festlegen, wird dies erzwungen. Verwenden Sie daher denselben Selektor, der alle Ihre Dialoge abdeckt, die ich #dialoghier verwende (wenn sie nicht gefunden werden, werden keine Aktionen ausgeführt, wie bei allen jQuery-Programmen):

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 dieselbe Demoseite der jQuery-Benutzeroberfläche, auf der nur der obige Code hinzugefügt wird. Wir fügen dem resizeEreignis des Fensters lediglich einen Handler hinzu .resize(), damit die Neuzentrierung zum richtigen Zeitpunkt ausgelöst wird. .

Alternativ zu Ellesedils Antwort:

Diese Lösung hat bei mir nicht sofort funktioniert, also habe ich Folgendes getan, was ebenfalls 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 hervorragend 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.

Eine umfassendere Antwort, die Nicks Antwort flexibler verwendet, finden Sie hier .

Eine Anpassung des relevanten Codes aus diesem Thread finden Sie unten. Diese Erweiterung erstellt im Wesentlichen eine neue Dialogeinstellung namens autoReposition, die ein wahr oder falsch akzeptiert. Der geschriebene Code ist standardmäßig auf true gesetzt. 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 beim Erstellen Ihres Dialogfelds auf Ihrer Seite ein "wahr" oder "falsch" für diese neue Einstellung angeben.

$(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 positioniert sich dieser Dialog immer neu. AutoReposition (oder wie auch immer Sie die Einstellung nennen) kann alle Dialoge verarbeiten, die keine Standardposition haben, und sie automatisch neu positionieren, wenn die Fenstergröße geändert wird. Da Sie dies beim Erstellen des Dialogfelds festlegen, müssen Sie kein Dialogfeld identifizieren, da die Neupositionierungsfunktion in das Dialogfeld selbst integriert wird. Und das Beste daran ist, dass Sie, da dies pro Dialog festgelegt ist, einige Dialoge neu positionieren können und andere dort bleiben, wo sie sind.

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

Eine andere Nur-CSS-Option, die funktioniert, ist diese. Die negativen Ränder sollten der Hälfte Ihrer Höhe und der Hälfte Ihrer Breite entsprechen. In diesem Fall ist mein Dialogfeld also 720 Pixel breit und 400 Pixel hoch. Dies zentriert es vertikal und horizontal.

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

Alternativ kann die Position jQuery ui verwendet werden.

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

Hallo, alle miteinander!

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