Ein Modal Box (Modal) ist eine untergeordnete Form, die auf der übergeordneten Form überlagert wird. In der Regel besteht der Zweck darin, Inhalte von einer separaten Quelle anzuzeigen, die eine gewisse Interaktion haben kann, ohne das übergeordnete Formular zu verlassen. Die Unterform kann Informationen, Interaktion usw. liefern
Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie modal.js verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
1. Nutzung
Sie können den versteckten Inhalt des Modal Box (Modal) Plugin umschalten:
Über Data Attribut: Legen Sie das Attribut data-toggle = "modal" im Controller-Element (z. B. eine Taste oder Link) fest und setzen Sie data-target = "#identifier" oder href = "#identifier", um das spezifische Modal-Box für Switch (mit ID = "Identifier") anzugeben.
Mit JavaScript: Mit dieser Technik können Sie ein modales Feld mit ID = "Identifier" über eine einfache JavaScript -Zeile aufrufen:
$ ('#identifier'). Modal (Optionen)
2. Einfaches Beispiel
div id="myModal"><div><button type="button" data-dismiss="modal">x</button><h3>Dial Box Title</h3></div><div><p>Dial Box Body</p></div><div><a href="#" data-dismiss="modal">Cancel</a><a href="#" Data-dismiss = "modal"> bestätigen </a> </div> </div>
Der modale Dialog kann direkt mit einer Schaltfläche oder einem Link aufgerufen werden. Dies ist die einfache Verwendung:
Kopieren Sie den Code wie folgt: <a href = "#modal1" rollen = "button" data-toggle = "modal"> vertrags add </a>
Wenn Sie das Dialogfeld jedes Mal, wenn es geöffnet wird, das Dialogfeld wie folgt löschen müssen:
Die Codekopie lautet wie folgt: $ ('#modal1'). Modal ('hide');
$ ("#modal1"). on ("Hidden", function () {$ ('#Form1') [0] .Reset ();}); // Löschen Sie nach dem Hinzufügen des Vertrags den Formularbetrieb
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.