Maison > Article > interface Web > 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 :
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.