Une boîte modale (modale) est une forme d'enfant qui est superposée sur le formulaire parent. En règle générale, le but est d'afficher le contenu d'une source distincte, qui peut avoir une certaine interaction sans quitter le formulaire parent. La sous-forme peut fournir des informations, une interaction, etc.
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer Modal.js. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation, vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
1. Utilisation
Vous pouvez basculer le contenu caché du plugin modal Box (modal):
Via l'attribut de données: définissez l'attribut data-toggle = "modal" sur l'élément de contrôleur (tel qu'un bouton ou un lien), et définissez Data-Target = "# identificateur" ou href = "# identifiant" pour spécifier la boîte modale spécifique pour changer (avec id = "identificateur").
Avec JavaScript: en utilisant cette technique, vous pouvez appeler une boîte modale avec id = "identifiant" via une ligne simple de javascript:
$ ('# identifiant'). Modal (options)
2. Exemple simple
div id = "MyModal"> <div> <Button Type = "Button" Data-Dismiss = "Modal"> x </ Button> <H3> Titre de la boîte de numérotation </h3> </div> <div> <p> CALL BOTH </p> </div> <v> <a href = "#" Data-Dismiss = "Modal"> Annuler </a> <a href = "# #" " Data-Dismiss = "Modal"> Confirmer </a> </div> </div>
La boîte de dialogue modale peut être appelée directement à l'aide d'un bouton ou d'un lien, et c'est l'utilisation simple:
Copiez le code comme suit: <a href = "# modal1" role = "bouton" data-toggle = "modal"> contrat ajouter </a>
De plus, lorsque vous devez faire en sorte que la boîte de dialogue efface les données de formulaire à chaque fois qu'elle est ouverte, comme suit:
La copie de code est la suivante: $ ('# modal1'). Modal ('hide');
$ ("# modal1"). on ("Hidden", function () {$ ('# form1') [0] .reset ();}); // Après avoir ajouté le contrat, effacez l'opération de formulaire
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.