Le Plugin Modal
Le plugin Modal est une / fenêtre boîte de dialogue qui apparaît en haut de la page en cours:
Astuce: Plugins peuvent être inclus individuellement ( en utilisant individuels Bootstrap "modal.js" fichier), ou tout à la fois ( en utilisant "bootstrap.js" ou "bootstrap.min.js" ).
Comment faire pour créer un Modal
L'exemple suivant montre comment créer un modal de base:
Exemple
<!-- Trigger the modal with a button -->
<button type="button" class="btn
btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Modal -->
<div id="myModal"
class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Essayez - le vous - même » Exemple Explained
Le "Trigger" partie:
Pour déclencher la fenêtre modale, vous devez utiliser un bouton ou un lien.
Ensuite , inclure les deux data-* attributs:
-
data-toggle="modal"ouvre la fenêtre modale -
data-target="#myModal"des points à l'id du modal
Le "Modal" partie:
Le parent <div> de la modale doit avoir une identification qui est la même que la valeur de l'attribut de données cible utilisée pour déclencher le modal ("myModal") .
La .modal classe identifie le contenu de <div> comme modal et apporte focus.
La .fade classe ajoute un effet de transition qui se fane modal et sortir. Supprimer cette classe si vous ne voulez pas cet effet.
L'attribut role="dialog" améliore l' accessibilité pour les personnes utilisant des lecteurs d'écran.
La .modal-dialog classe définit la bonne largeur et la marge du modal.
Le "contenu Modal" partie:
Le <div> avec class="modal-content " styles modal (frontière, fond couleur, etc.). Dans ce <div> , ajoutez - tête, le corps et le pied de page du modal.
Le .modal-header de classe est utilisé pour définir le style de l' en- tête du modal. Le <button> dans l' en- tête a une data-dismiss="modal" les data-dismiss="modal" attribut qui ferme le modal si vous cliquez dessus. Les .close styles de classe le bouton de fermeture, et les .modal-title styles de classe l' en- tête avec une ligne-hauteur appropriée.
Le .modal-body de classe est utilisé pour définir le style du corps du modal. Ajouter toutes les balises HTML ici; paragraphes, images, vidéos, etc.
Le .modal-footer classe est utilisée pour définir le style pour le pied de page du modal. Notez que cette zone est aligné à droite par défaut.
Modal Taille
Modifier la taille du modal en ajoutant le .modal-sm classe pour les petits modaux ou .modal-lg classe pour les grandes modaux.
Ajouter la classe de taille à la <div> élément avec classe .modal-dialog :
 | Par défaut, les modaux sont de taille moyenne. |
|---|
Remplissez Bootstrap Modal Référence
Pour une référence complète de toutes les options modales, méthodes et événements, rendez - vous à notre Bootstrap JS Modal Référence .