Einfache Verwendung der modalen Dialog_Javascript-Fähigkeiten von Bootstrap

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:

Code kopieren Der Code lautet wie folgt:

fa1e10c5b7069aa64f8d02cdb4fe14e0Contract Add5db79b134e9f6b82c0b36e0489ee08ed

Wenn Sie außerdem das Dialogfeld aktivieren müssen, um die Formulardaten bei jedem Öffnen zu löschen, gehen Sie wie folgt vor:

Code kopieren Der Code lautet wie folgt:

$('#modal1').modal('hide ');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();} //Nach dem Hinzufügen des Vertrags die Formularoperation löschen

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.