Une brève analyse de l'utilisation des compétences BootStrap modal box (classic)_javascript

Un bref aperçu de la boîte modale BootStrap

Les modaux Bootstrap sont créés à l'aide d'un plugin Jquery personnalisé. Il peut être utilisé pour créer des fenêtres modales pour enrichir l'expérience utilisateur ou pour ajouter des fonctions pratiques aux utilisateurs. Vous pouvez utiliser des popovers et des info-bulles avec des modaux.

1, boîte de dialogue modale Bootstrap et utilisation simple

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> 

Les boîtes de dialogue modales peuvent être appelées directement à l'aide de boutons ou de liens, voici l'utilisation simple :

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

De plus, lorsque vous devez activer la boîte de dialogue pour effacer les données du formulaire à chaque ouverture, comme suit :

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

Le contenu ci-dessus est l'utilisation de la boîte modale BootStrap introduite par l'éditeur. J'espère qu'il sera utile à tout le monde. Pour un contenu plus passionnant, veuillez faire attention au site Web de Script House !