Heim > Web-Frontend > js-Tutorial > Einfache Verwendung der modalen Dialog_Javascript-Fähigkeiten von Bootstrap

Einfache Verwendung der modalen Dialog_Javascript-Fähigkeiten von Bootstrap

WBOY
Freigeben: 2016-05-16 15:03:11
Original
1545 Leute haben es durchsucht

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>
Nach dem Login kopieren

Modale Dialoge können direkt über Schaltflächen oder Links aufgerufen werden, hier ist die einfache Verwendung:

Code kopieren Der Code lautet wie folgt:

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.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage