Plugin modal d' amorçage
Le plugin modal
Le plugin modal est une boîte de dialogue/fenêtre contextuelle qui s'affiche en haut de la page actuelle :
Conseil : Les plugins peuvent être inclus individuellement (à l'aide du fichier "modal.js" individuel de Bootstrap), ou tous à la fois (à l'aide de "bootstrap.js" ou "bootstrap.min.js").
Comment 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>
Exemple expliqué
La partie "Trigger":
Pour déclencher la fenêtre modale, vous devez utiliser un bouton ou un lien.
Incluez ensuite les deux attributs data-* :
data-toggle="modal"ouvre la fenêtre modaledata-target="#myModal"pointe vers l'id du modal
La partie "Modale" :
Le parent <div>du modal doit avoir un ID identique à la valeur de l'attribut data-target utilisé pour déclencher le modal ("myModal").
La .modalclasse identifie le contenu de <div>comme un modal et y met l'accent.
La .fadeclasse ajoute un effet de transition qui fait apparaître et disparaître le modal. Supprimez 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-dialogclasse définit la largeur et la marge appropriées du modal.
La partie "Contenu modal" :
Le <div>avec class="modal-content" stylise le modal (bordure, couleur d'arrière-plan, etc.). À l'intérieur de celui -ci <div>, ajoutez l'en-tête, le corps et le pied de page du modal.
La .modal-headerclasse est utilisée pour définir le style de l'en-tête du modal. L' <button>intérieur de l'en-tête a un data-dismiss="modal"attribut qui ferme le modal si vous cliquez dessus. La .closeclasse stylise le bouton de fermeture et la .modal-titleclasse stylise l'en-tête avec une hauteur de ligne appropriée.
La .modal-bodyclasse est utilisée pour définir le style du corps du modal. Ajoutez n'importe quel balisage HTML ici; paragraphes, images, vidéos, etc.
La .modal-footerclasse est utilisée pour définir le style du pied de page du modal. Notez que cette zone est alignée à droite par défaut.
Taille modale
Modifiez la taille du modal en ajoutant la .modal-sm
classe pour les petits modaux ou .modal-lgla classe pour les grands modaux.
Ajoutez la classe de taille à l' <div>élément avec class .modal-dialog:
Petit modal
<div class="modal-dialog modal-sm">
Grand modal
<div class="modal-dialog modal-lg">
Par défaut, les modaux sont de taille moyenne.
Référence modale Bootstrap complète
Pour une référence complète de toutes les options, méthodes et événements modaux, accédez à notre Bootstrap JS Modal Reference .