Modal ist ein Unterformular, das das übergeordnete Formular abdeckt. Typischerweise besteht der Zweck darin, Inhalte aus einer separaten Quelle anzuzeigen, die eine gewisse Interaktion ermöglichen, ohne das übergeordnete Formular zu verlassen. Unterformulare bieten Informationen, Interaktion und mehr.
Wenn Sie die Funktionalität dieses Plugins separat referenzieren möchten, müssen Sie auf modal.js verweisen. Alternativ können Sie, wie im Kapitel „Übersicht über das Bootstrap-Plugin“ erwähnt, auf bootstrap.js oder eine minimierte Version von bootstrap.min.js verweisen.
1. Verwendung
Sie können den versteckten Inhalt des modalen Plugins wechseln:
Über das Datenattribut: Legen Sie das Attribut data-toggle="modal" für das Controller-Element (z. B. eine Schaltfläche oder einen Link) fest und legen Sie data-target="#identifier" oder href="#identifier" fest, um den spezifischen Modus anzugeben Statusfeld (mit id="identifier").
Über JavaScript: Mit dieser Technik können Sie ein Modal mit id="identifier" mit einer einfachen JavaScript-Zeile aufrufen:
$('#identifier').modal(optionen)
2. Einfaches Beispiel
div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>对话框标题</h3> </div> <div class="modal-body"> <p>对话框主体</p> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">取消</a> <a href="#" class="btn btn-primary" data-dismiss="modal">确定</a> </div> </div>
Modale Dialoge können direkt über Schaltflächen oder Links aufgerufen werden, hier ist die einfache Verwendung:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.