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!
quelle
$(".ui-dialog-content").dialog("option", "position", "center");
, dies wird nach jedem DialogAlternativ 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:
+1 für Ellesedil
BEARBEITEN:
Viel kürzere Version, die sich hervorragend für einzelne Dialoge eignet:
Es ist nicht erforderlich, dass .each () verwendet wird, wenn Sie einige eindeutige Dialoge haben, die Sie nicht berühren möchten.
quelle
.resize()
und innerhalb hinzu, wenn der Zähler erreicht10
oder20
dannbreak;
, ich hatte dieses Problem nicht, ich kümmere mich nicht um diese Geräte / Browser. Sie müssen eine Lösung ausprobieren, die Sie verlassen können, wenn sie nicht weiterkommtEine 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.
Auf diese Weise können Sie beim Erstellen Ihres Dialogfelds auf Ihrer Seite ein "wahr" oder "falsch" für diese neue Einstellung angeben.
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.
quelle
$(".ui-dialog-content:visible").each(function () { if ($(this).dialog('option', 'autoReposition')) { $(this).dialog('option', 'position', $(this).dialog('option', 'position')); } });
Es funktioniert$( "#dialog" ).dialog( "option", "position" )
um$(this).data("dialog").options.position
später. Wie auch immer, jetzt funktioniert diese Antwort!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.
quelle
Alternativ kann die Position jQuery ui verwendet werden.
quelle
Hallo, alle miteinander!
Vanilla JS-Lösung:
quelle
$.isVanillaJS == false