Eine kurze Analyse der Verwendung von BootStrap Modal Box (klassisch)_Javascript-Fähigkeiten

Ein kurzer Überblick über die BootStrap-Modalbox

Bootstrap-Modals werden mit einem benutzerdefinierten JQuery-Plugin erstellt. Es kann verwendet werden, um modale Fenster zu erstellen, um das Benutzererlebnis zu bereichern, oder um Benutzern praktische Funktionen hinzuzufügen. Sie können Popovers und Tooltips in Modals verwenden.

1, modales Bootstrap-Dialogfeld und einfache Verwendung

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:

<a href="#modal1" role="button" class="btn btn-primary btn-sm" data-toggle="modal">合同添加</a> 

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

$('#modal1').modal('hide');
$("#modal1").on("hidden", function() {$('#form1')[0].reset();}); //添加合同后,清空表单操作

Der oben genannte Inhalt ist die vom Herausgeber eingeführte modale Box von BootStrap. Ich hoffe, dass er für alle hilfreich ist. Weitere spannende Inhalte finden Sie auf der Script House-Website.