jQuery dialog immer zentriert
Wie kann ich realisieren, dass ein jQuery modal dialog mit automatischer Breite & height wird immer zentriert im browser. Auch nach änderung der Fenstergröße des Browsers.
Folgende code funktioniert nicht. Ich denke, das problem ist die auto-Breite & height.
jQuery - code
$("<div class='popupDialog'>Loading...</div>").dialog({
autoOpen: true,
closeOnEscape: true,
height: 'auto',
modal: true,
title: 'About Ricky',
width: 'auto'
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
});
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
Danke!
- Binden Sie die
resize
Veranstaltung auf derwindow
und aktualisieren Sie Ihretop/left
Positionierung entsprechend - Wie kann er markieren, kommentieren, wie die richtige Antwort, Frage ich mich? 🙂
- Ich aktualisiert meine Frage.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Eigentlich, ich denke, die
position: ["center", "center"]
nicht die beste Lösung, so weist es eine explizitetop:
undleft:
css-Eigenschaften, um den dialog auf die Größe des Viewports auf die Schöpfung.Stieß ich auf das gleiche Problem beim Versuch, eine dialog-center auf dem Bildschirm vertikal. Hier ist meine Lösung:
In der
options
Teil meiner.dialog()
Funktion, ich passposition:[null, 32]
. Dienull
legt dieleft:
Wert das element, das den Stil und die32
ist nur für die Führung der dialog-box an den oberen Rand des Fensters. Auch werden Sie sicher, dass Sie eine explizite Breite.Benutze ich auch die
dialogClass
option zum zuweisen einer benutzerdefinierten Klasse, die ist einfach einmargin:0 auto;
css-Eigenschaft:Und mein dialog sieht wie folgt aus:
Hoffentlich hilft jemand.
Arbeiten jsFiddle: http://jsfiddle.net/vNB8M/
Ist der dialog zentriert mit automatischer Breite & Höhe und weiter zentriert werden nach Fenster Größe ändern.
width & height = auto
dialog ist platziert in der unteren rechten Ecke..load(url, function()
. Dies ist eine Herausforderung für mich, um diese code-arbeiten mit derload
Methode.load
Ereignis verursacht Probleme, aber ich weiß nicht, warum. Ich habe auch geladene Inhalt ohne CSS und es auch nicht funktioniert. Können Sie bitte aktualisieren Sie Ihre jsFiddle-code mit einem load-Ereignis? DankKeine Antworten wussten durchaus, was ich wollte. Für diejenigen, die noch Probleme haben mit diesem, hier ist was für mich gearbeitet. Diese bewirkt, dass der dialog erscheint immer in der Mitte des Bildschirms, und es wird das Zentrum den dialog der browser in der Größe geändert wird.
Den modal-Fenster, um das Dialogfeld sollte, können Sie das Dialogfeld zentriert mit css von:
Funktioniert das nicht? Haben Sie eine 'Probe' - Seite, die wir anschauen können?
Diese Lösung funktioniert:
Performance ist ziemlich schlecht, aber Sie können warten, für die Größe ändern end: jQuery - wie zum warten Sie, bis das 'Ende' der 'resize' - event und nur dann eine Aktion ausführen?.
Habe ich auch versucht, aber ich kann nicht scrollen, die niedriger oder höher als die position des Elements, die im geöffneten dialog: