Die Datei, die ich in den modalen Dialog geladen habe, kann in der Höhe variieren. Wenn der erste Link geöffnet wird, wird der obere Teil des Dialogs horizontal zentriert (dh der Dialog ist zu niedrig positioniert). Nach dem Schließen und erneutem Öffnen mit derselben Bearbeitungsschaltfläche oder einer anderen, ist die Positionierung besser.
Es sieht so aus, als ob es immer einen Schritt hinterherhinkt: Bei der ersten Ladung kann es nicht sagen, welche Breite / Höhe von der Datei geladen wird, und bei einer nachfolgenden Ladung der gleichen Datei ist es perfekt positioniert.
Ich verwende den folgenden Code als modale Bearbeitung für eine Datentabelle:
%Vor%Und hier ist ein Beispiel HTML (obwohl die in #modify geladene Datei nicht live ist). Ich habe dies auch in JS Bin eingerichtet.
%Vor%
Der 'eine Schritt hinter' liegt daran, dass Sie in Ihrem geöffneten Dialog versuchen, die Daten zu laden. Wenn der Dialog angezeigt wird, wird der alte Inhalt angezeigt und plötzlich wird der neue Inhalt angezeigt.
Eine Möglichkeit, dies zu erreichen, besteht darin, den Dialog zu öffnen, den vorhandenen Inhalt zu löschen und ein Lade-GIF anzuzeigen, während Sie darauf warten, dass der Ajax-Aufruf mit den Daten antwortet, die Sie dann in den Dialog laden.
NB Wenn Sie sich Gedanken über den Bildschirmruck machen, wenn die Größe des Dialogs geändert wird, können Sie die Ajax-Antwort in ein div platzieren, das außerhalb des Bildschirms positioniert ist Dialog, während der neue Inhalt eingeblendet wird.
%Vor%Sie können eine Neuzentrierung auslösen, sobald der Inhalt geladen ist (so dass Sie die Größe kennen), wie folgt:
%Vor% Dies verwendet nur den Rückruf für .load() und legt die position option , die zum richtigen Zeitpunkt ein Re-Center auslöst ... sobald Sie wissen, was die richtige Größe ist.
Als Nebenbemerkung können Sie, da Sie das Dialogfeld erstellen und anschließend öffnen, sowohl die autoOpen: false, -Eigenschaft als auch .dialog("open") entfernen, das Standardverhalten ist das sofortige Öffnen:)
Ich bin mir nicht sicher, ob ich etwas verpasse, aber hier ist, wie ich es gemacht habe. Ich habe ein div innerhalb des Dialogs mit einer ID, wenn ich den Dialog öffnen möchte, führe ich eine Funktion aus, die den Inhalt zuerst in das div innerhalb des Dialogs lädt, dann öffne ich den Dialog, wenn der Laden abgeschlossen ist. (Beispiel: $ ("# foo"). load ("/ Dateipfad.html", Funktion () {$ ("# Dialog"). Dialog ("Öffnen");});
Tags und Links jquery jquery-ui modal-dialog