Wie kann ich implementieren, dass ein jQuery Modaldialog mit automatischer Breite & amp; Die Höhe wird immer im Browser zentriert. Auch nach der Größenänderung des Fensters des Browsers.
Der folgende Code funktioniert nicht. Ich denke, das Problem ist die automatische Breite & amp; Höhe.
jQuery - Code
%Vor%Danke!
Ich glaube, dass die position: ["center", "center"] nicht die beste Lösung ist, da sie dem Dialog basierend auf der Größe des Ansichtsfensters bei der Erstellung eine Eigenschaft top: und left: css zuweist.
Ich bin auf dasselbe Problem gestoßen, als ich versucht habe, eine Dialogzentrale vertikal auf dem Bildschirm zu haben. Hier ist meine Lösung:
Im options Teil meiner .dialog() Funktion übergebe ich position:[null, 32] . Der null setzt den left: -Wert auf den Stil des Elements, und der 32 dient nur dazu, das Dialogfeld an den Anfang des Fensters gebunden zu halten. Stellen Sie außerdem sicher, dass Sie eine explizite Breite festlegen.
Ich verwende auch die Option dialogClass , um eine benutzerdefinierte Klasse zuzuweisen, die einfach eine margin:0 auto; css-Eigenschaft ist:
Und mein Dialog sieht so aus:
%Vor%Hoffentlich hilft das jemandem.
Arbeiten jsFiddle: Ссылка
Der Dialog ist zentriert mit automatischer Breite & amp; Höhe und bleibt nach der Fenstergröße zentriert.
Keine der Antworten hat mir wirklich gefallen. Für diejenigen, die immer noch Probleme damit haben, hier ist, was für mich funktionierte. Dadurch wird der Dialog immer in der Mitte des Bildschirms angezeigt und der Dialog wird zentriert, wenn die Größe des Browsers geändert wird.
%Vor%Diese Lösung funktioniert:
%Vor%Die Leistung ist ziemlich schlecht, aber Sie können auf das Ende der Größenänderung warten: jQuery - Wie man auf das 'Ende' des 'resize' Ereignisses wartet und erst dann eine Aktion durchführt? .
Ich habe das auch versucht, aber ich kann nicht tiefer oder höher scrollen als die Position des Elements, das den Dialog geöffnet hat:
%Vor%Tags und Links jquery jquery-ui modal-dialog