Bootstrap4 Modale
Une fenêtre modale est une fenêtre enfant qui se superpose à la fenêtre parente. Habituellement, le but est d'afficher du contenu provenant d'une source distincte, permettant une certaine interaction sans quitter la fenêtre parente. La fenêtre enfant peut fournir une interaction d'informations, etc.
Comment créer une fenêtre modale
L'exemple suivant crée un effet modal simple :
Exemple
<!--Bouton : utilisé pour ouvrir la fenêtre modale-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Ouvrir la fenêtre modale</button>
<!--Modale-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!--En-tête de la fenêtre modale-->
<div class="modal-header">
<h4 class="modal-title">En-tête de la fenêtre modale</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!--Corps de la modale-->
<div class="modal-body">Contenu de la modale..</div>
<!--Pied de la modale-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
</div>
Essayez-le vous-même »
Taille de la modale
Nous pouvons, en ajoutant la classe.modal-sm, créer une petite modale, la classe.modal-lgpeut créer une grande modale.
Les classes de taille sont placées après l'élément<div>, après la classe.modal-dialog:
Autres extensions