Bootstrap 4 modaux
Bootstrap 4 modaux
Le composant modal est une boîte de dialogue/fenêtre contextuelle qui s'affiche en haut de la page actuelle :
Comment créer un modal
L'exemple suivant montre comment créer un modal de base :
Exemple
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ajouter une animation
Utilisez la .fadeclasse pour ajouter un effet de fondu lors de l'ouverture et de la fermeture du modal :
Exemple
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Taille modale
Modifiez la taille du modal en ajoutant la .modal-sm
classe pour les petits modaux, .modal-lgla classe pour les grands modaux ou .modal-xlpour les très 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">
Modal extra-large
<div class="modal-dialog modal-xl">
Par défaut, les modaux sont de taille "moyenne".
Modal centré
Centrez le modal verticalement et horizontalement dans la page, avec la .modal-dialog-centered
classe :
Exemple
<div class="modal-dialog modal-dialog-centered">
Défilement modal
Lorsque vous avez beaucoup de contenu dans le modal, une barre de défilement est ajoutée à la page. Voir les exemples ci-dessous pour le comprendre :
Exemple
<div class="modal-dialog">
Cependant, il est possible de faire défiler uniquement à l'intérieur du modal, au lieu de la page elle-même, en ajoutant .modal-dialog-scrollableà .modal-dialog:
Exemple
<div class="modal-dialog modal-dialog-scrollable">
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 .