Utilisation simple des compétences modales bootstrap dialog_javascript

Modal est un sous-formulaire couvrant le formulaire parent. En règle générale, le but est d'afficher du contenu provenant d'une source distincte pouvant avoir une certaine interaction sans quitter le formulaire parent. Les sous-formulaires fournissent des informations, des interactions et bien plus encore.

Si vous souhaitez référencer les fonctionnalités de ce plugin séparément, vous devez alors référencer modal.js. Alternativement, comme mentionné dans le chapitre de présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou une version minifiée de bootstrap.min.js.
1.Utilisation
Vous pouvez changer le contenu caché du plugin modal :
Via l'attribut data : définissez l'attribut data-toggle="modal" sur l'élément du contrôleur (comme un bouton ou un lien), et définissez data-target="#identifier" ou href="#identifier" pour spécifier le mode spécifique. à changer de boîte d'état (avec id="identifiant").
Via JavaScript : Grâce à cette technique, vous pouvez appeler un modal avec id="identifier" avec une simple ligne de JavaScript :
$('#identifiant').modal(options)
2. Exemple 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 :

Copier le code Le code est le suivant :

bd7adf18a4867534017a2d2746c90989Ajout de contrat5db79b134e9f6b82c0b36e0489ee08ed

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

Copier le code Le code est le suivant :

$('#modal1').modal('hide ');
$("#modal1").on("hidden", function() {$('#form1')(0].reset();}); //Après avoir ajouté le contrat, effacez l'opération du formulaire

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.