Führen Sie den Modus modal aus, um Daten auf einmal zu laden

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen beim Betrieb von Modal zum Laden von Daten in einem einzigen Schritt vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

1. Bootstrap Modales Dialogfeld und einfache Verwendung

 <p id="myModal" class="modal hide fade">
 <p class="modal-header">
 <button type="button" class="close" data-dismiss="modal">x</button>
 <h3>对话框标题</h3>
 </p>
 <p class="modal-body">
 <p>对话框主体</p>
 </p>
 <p class="modal-footer">
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn" data-dismiss="modal">取消</a>
 <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">确定</a>
 </p>
</p>

Modale Dialoge können direkt über den -Button oder einen Link aufgerufen werden, hier ist die einfache Verwendung:

<button type="button" data-toggle="modal" data-target="#myModal">打开对话框</button>
<a href="#myModal" rel="external nofollow" role="button" class="btn" data-toggle="modal">打开对话框</button>

2. Verwenden Sie die Remote-Option, damit der modale Dialog die Seite in .modal-body lädt

Es gibt zwei Methoden: Eine besteht darin, Links zu verwenden, und die andere darin, Skripte zu verwenden.

2.1 Links verwenden

<a href="page.jsp" rel="external nofollow" data-toggle="modal" data-target="#myModal">打开对话框</a>

Wenn auf diesen Link geklickt wird, wird der Inhalt von page.jsp in den .modal-body des Dialogfelds geladen und das Dialogfeld angezeigt.

2.2 Skripte verwenden

$("#myModal").modal({
 remote: "page.jsp"
});

Die Wirkung dieses Skripts ist die gleiche wie bei der Verwendung eines Links. Wenn dieses Skript ausgeführt wird, wird der Inhalt von page.jsp in den .modal-Body des Dialogfelds geladen und das Dialogfeld angezeigt.

Hinter diesen beiden Methoden ruft Bootstrap die Methode „load()“ von jQuery auf, um page.jsp vom Server zu laden. Seite. Dieses Laden erfolgt jedoch nur einmal, unabhängig davon, wie oft Sie auf den Link klicken oder das Skript ausführen, selbst wenn die Änderungen an die Fernbedienung weitergeleitet werden Der Wert der Option bewirkt, dass das Dialogfeld die Seite nicht neu lädt, was echte Kopfschmerzen bereitet. Das Problem lässt sich jedoch noch lösen.

3. Daten entfernen, damit das Dialogfeld die Seite bei jedem Öffnen neu laden kann

Nachdem ich nach in gesucht und relevante Dokumente konsultiert hatte, stellte ich fest, dass ich einfach eine Aussage in das versteckte -Ereignis des Dialogfelds schrieb:

$("#myModal").on("hidden", function() {
 $(this).removeData("modal");
});

Sie können die Daten auch jedes Mal entfernen, bevor Sie das Dialogfeld öffnen. Der Effekt ist derselbe.

Hinweis: Der obige Code basiert auf Bootstrap v2. Der HTML-Code des modalen Dialogfelds und die Art und Weise, wie das Ereignis geschrieben wird, sollten beispielsweise wie folgt geschrieben werden:

$("#myModal").on("hidden.bs.modal", function() {
 $(this).removeData("bs.modal");
});

Ich glaube, Sie haben es gelesen. Im Fall dieses Artikels beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonFühren Sie den Modus modal aus, um Daten auf einmal zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!