Ich habe ein jQuery-Dialogfeld und lade den Inhalt mit Ajax.
Der Dialog befindet sich zunächst in der Mitte der Seite. Das Problem ist hier, Da es sich um einen dynamischen Inhalt handelt, ist die Größe der Daten unbekannt. Wenn ich also große Daten erhalte, wird der Dialog nur in der unteren Seite größer, d. H. Der Dialog wird im unteren Bereich erweitert, und der obere Bereich befindet sich immer noch an derselben Position.
Was ich will ist
Wenn die Daten geladen werden, sollte der Dialog in beide Richtungen (oben und unten) erweitert werden, so dass der Inhalt ohne Scrollen sichtbar ist.
Der Standarddialog ist absolut relativ positioniert.
Der Dialog wird möglicherweise erweitert, wenn auto height angegeben wird. Wenn die Seite jedoch gescrollt wird, wird der Dialog neu positioniert.
Sie können diese Stile nur auf das Dialogfeld anwenden
Positionieren Sie den Dialog im Fenster um
position : ['center',<distance from top>]
Fix die Position mit CSS-Stil
.fixed-dialog { position:"fixed" }
Fügen Sie diese Klasse zum Dialogfeld hinzu
dialogClass : 'fixed-dialog'
So würde der Dialog aussehen wie
%Vor%Keine der Antworten, die ich im Internet fand, hat mich befriedigt, während ich die Lösung betrachtete. Selbst das tut es nicht. Nachdem ich viel mehr über die JQuery-API-Dokumentation gelesen hatte, fand ich etwas wirklich Interessantes . Wie auf dieser Webseite beschrieben, können Sie ein Ereignis binden, in dem es ausgeführt wird, nachdem die Ajax-Anfrage ihre Aufgabe erledigt hat. Die Sache ist, es ist nicht so einfach wie das; Da ich mit dem Beispiel in der API-Dokumentation meine eigenen Tests durchführte, konnte ich es nicht zum Laufen bringen. Es scheint, als ob mein JQuery-Dialog nicht in einer "zukünftigen" Kontextweise existiert.
Dies führte mich zu dieser Seite , deren Beschreibung war: Fügen Sie einen Event-Handler für alle Elemente an, die jetzt und in Zukunft mit dem aktuellen Selektor übereinstimmen. Wenn Sie das finden, kann ich eine Funktion wie diese erstellen:
%Vor%Und voila! Es wirkt wie ein Zauber! Nachdem die Ajax-Anfrage erledigt ist, wird die position -Eigenschaft geändert und an den Inhalt des div und seiner Dimensionen angepasst!
Ich hoffe, es hilft den Menschen in der Zukunft!
EDIT: Vielleicht möchten Sie die Funktion ".on ()" anstelle von ".live ()" verwenden. Seit der Zeit, in der ich meine Antwort geschrieben habe, scheint die Funktion ".live ()" in der Version 1.9 von jQuery entfernt und durch die neue ersetzt worden zu sein. Eine geeignetere Lösung für Benutzer von jQuery & gt; = 1.9 wäre etwa so:
%Vor%