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!
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
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.
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.
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
}
Alternativ kann jQuery ui position verwendet werden,
$(window).resize(function ()
{
$(".ui-dialog").position({
my: "center", at: "center", of: window
});
});
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 });
}
}());