Modal
Utilisez le plug-in modal JavaScript de Bootstrap pour ajouter des boîtes de dialogue à votre site pour les lightboxes, les notifications des utilisateurs ou un contenu entièrement personnalisé.
- Comment ça fonctionne
- Exemples
- Composants modaux
- Démo directe
- Toile de fond statique
- Faire défiler le contenu long
- Centré verticalement
- Info-bulles et popovers
- Utilisation de la grille
- Contenu modal variable
- Basculer entre les modaux
- Modifier l'animation
- Supprimer l'animation
- Hauteurs dynamiques
- Accessibilité
- Intégration de vidéos YouTube
- Tailles facultatives
- Mode plein écran
- Sass
- Utilisation
Comment ça fonctionne
Avant de commencer avec le composant modal de Bootstrap, assurez-vous de lire ce qui suit car nos options de menu ont récemment changé.
- Les modaux sont construits avec HTML, CSS et JavaScript. Ils sont positionnés sur tout le reste du document et suppriment le défilement du
<body>
afin que le contenu modal défile à la place. - Cliquer sur le "toile de fond" modale fermera automatiquement le modal.
- Bootstrap ne prend en charge qu'une seule fenêtre modale à la fois. Les modaux imbriqués ne sont pas pris en charge car nous pensons qu'ils constituent une mauvaise expérience utilisateur.
- Modals utilise
position: fixed
, qui peut parfois être un peu particulier quant à son rendu. Dans la mesure du possible, placez votre HTML modal dans une position de niveau supérieur pour éviter les interférences potentielles d'autres éléments. Vous rencontrerez probablement des problèmes lors de l'imbrication d'un.modal
dans un autre élément fixe. - Encore une fois, en raison de
position: fixed
, il y a quelques mises en garde concernant l'utilisation des modaux sur les appareils mobiles. Consultez nos documents de support de navigateur pour plus de détails. - En raison de la façon dont HTML5 définit sa sémantique, l'
autofocus
attribut HTML n'a aucun effet dans les modaux Bootstrap. Pour obtenir le même effet, utilisez du JavaScript personnalisé :
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
requête multimédia. Voir la section mouvement réduit de notre documentation sur l'accessibilité.
Continuez à lire pour des démos et des directives d'utilisation.
Exemples
Composants modaux
Vous trouverez ci-dessous un exemple modal statique (ce qui signifie que ses position
et display
ont été remplacés). Sont inclus l'en-tête modal, le corps modal (requis pour padding) et le pied de page modal (facultatif). Nous vous demandons d'inclure des en-têtes modaux avec des actions de rejet chaque fois que possible, ou de fournir une autre action de rejet explicite.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Démo en direct
Basculez vers une démo modale fonctionnelle en cliquant sur le bouton ci-dessous. Il glissera vers le bas et s'estompera à partir du haut de la page.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Toile de fond statique
Lorsque la toile de fond est définie sur statique, la fenêtre modale ne se ferme pas lorsque vous cliquez en dehors de celle-ci. Cliquez sur le bouton ci-dessous pour l'essayer.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Faire défiler le contenu long
Lorsque les modaux deviennent trop longs pour la fenêtre d'affichage ou l'appareil de l'utilisateur, ils défilent indépendamment de la page elle-même. Essayez la démo ci-dessous pour voir ce que nous voulons dire.
Vous pouvez également créer un modal déroulant qui permet de faire défiler le corps modal en ajoutant .modal-dialog-scrollable
à .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Centré verticalement
Ajouter .modal-dialog-centered
à .modal-dialog
pour centrer verticalement le modal.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Info-bulles et popovers
Les info-bulles et les popovers peuvent être placés dans les modaux selon les besoins. Lorsque les modaux sont fermés, toutes les info-bulles et popovers qu'ils contiennent sont également automatiquement ignorés.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
Ustilisation de la grille
Utilisez le système de grille Bootstrap dans un modal en l'imbriquant .container-fluid
dans le fichier .modal-body
. Ensuite, utilisez les classes de système de grille normales comme vous le feriez n'importe où ailleurs.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
Contenu modal variable
Vous avez un tas de boutons qui déclenchent tous le même modal avec un contenu légèrement différent ? Utilisez les event.relatedTarget
et les attributs HTML et pour faire varier le contenu du modal en fonction du bouton sur lequel vous avez cliqué data-bs-*
Vous trouverez ci-dessous une démonstration en direct suivie d'exemples HTML et JavaScript. Pour plus d'informations, lisez la documentation sur les événements modaux pour plus de détails sur relatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
Basculer entre les modaux
Basculez entre plusieurs modaux avec un placement intelligent des attributs data-bs-target
et data-bs-toggle
Par exemple, vous pouvez basculer un modal de réinitialisation de mot de passe à partir d'un modal de connexion déjà ouvert. Veuillez noter que plusieurs modaux ne peuvent pas être ouverts en même temps - cette méthode bascule simplement entre deux modaux distincts.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
Modifier l'animation
La $modal-fade-transform
variable détermine l'état de transformation de .modal-dialog
avant l'animation de fondu modal, la $modal-show-transform
variable détermine la transformation de .modal-dialog
à la fin de l'animation de fondu modal.
Si vous voulez par exemple une animation de zoom avant, vous pouvez définir $modal-fade-transform: scale(.8)
.
Supprimer l'animation
Pour les modaux qui apparaissent simplement plutôt que de s'afficher en fondu, supprimez la .fade
classe de votre balisage modal.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Hauteurs dynamiques
Si la hauteur d'un modal change alors qu'il est ouvert, vous devez appeler myModal.handleUpdate()
pour réajuster la position du modal au cas où une barre de défilement apparaîtrait.
Accessibilité
Assurez-vous d'ajouter aria-labelledby="..."
, faisant référence au titre modal, à .modal
. De plus, vous pouvez donner une description de votre boîte de dialogue modale avec aria-describedby
sur .modal
. Notez que vous n'avez pas besoin d'ajouter role="dialog"
puisque nous l'avons déjà ajouté via JavaScript.
Intégration de vidéos YouTube
L'intégration de vidéos YouTube dans les modaux nécessite du JavaScript supplémentaire qui n'est pas dans Bootstrap pour arrêter automatiquement la lecture et plus encore. Voir cet article utile sur Stack Overflow pour plus d'informations..
Tailles facultatives
Les modaux ont trois tailles optionnelles, disponibles via des classes de modificateurs à placer sur un fichier .modal-dialog
. Ces tailles entrent en jeu à certains points d'arrêt pour éviter les barres de défilement horizontales sur les fenêtres plus étroites.
Taille | Classe | Largeur maximale modale |
---|---|---|
Petit | .modal-sm |
300px |
Défaut | None | 500px |
Grand | .modal-lg |
800px |
Extra large | .modal-xl |
1140px |
Notre modal par défaut sans classe de modificateur constitue le modal de taille "moyenne".
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Modal plein écran
Un autre remplacement est l'option d'afficher un modal qui couvre la fenêtre d'affichage de l'utilisateur, disponible via des classes de modificateurs placées sur un fichier .modal-dialog
.
Classe | Disponibilité |
---|---|
.modal-fullscreen |
Toujours |
.modal-fullscreen-sm-down |
Au dessous de 576px |
.modal-fullscreen-md-down |
Au dessous de 768px |
.modal-fullscreen-lg-down |
Au dessous de 992px |
.modal-fullscreen-xl-down |
Au dessous de 1200px |
.modal-fullscreen-xxl-down |
Au dessous de 1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Variables
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
Boucle
Les modaux plein écran responsives sont générés via la $breakpoints
carte et une boucle dans scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
Utilisation
Le plugin modal bascule votre contenu caché à la demande, via des attributs de données ou JavaScript. Il remplace également le comportement de défilement par défaut et génère un .modal-backdrop
pour fournir une zone de clic pour ignorer les modaux affichés lorsque vous cliquez en dehors du modal.
Via les attributs de données
Basculer
Activez un modal sans écrire de JavaScript. Définissez data-bs-toggle="modal"
un élément de contrôleur, comme un bouton, avec un data-bs-target="#foo"
ou href="#foo"
pour cibler un modal spécifique à basculer.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Rejeter
Le rejet peut être réalisé avec l' data
attribut sur un bouton dans le modal , comme illustré ci-dessous :
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
ou sur un bouton en dehors du modal en utilisant le data-bs-target
comme démontré ci-dessous :
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Via JavaScript
Créez un modal avec une seule ligne de JavaScript :
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Options
Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-bs-
, comme dans data-bs-backdrop=""
.
Nom | Type | Défaut | Description |
---|---|---|---|
backdrop |
boolean or the string 'static' |
true |
Inclut un élément modal-backdrop. Vous pouvez également spécifier staticun fond qui ne ferme pas le modal au clic. |
keyboard |
boolean | true |
Ferme le modal lorsque la touche d'échappement est enfoncée |
focus |
boolean | true |
Met le focus sur le modal lors de l'initialisation. |
Méthodes
Méthodes et transitions asynchrones
Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré.
Consultez notre documentation JavaScript pour plus d'informations ..
Options de passe
Active votre contenu en tant que modal. Accepte une option facultative object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
Basculer
Bascule manuellement un modal. Renvoie à l'appelant avant que le modal ait été réellement affiché ou masqué (c'est-à-dire avant que l' événement shown.bs.modal
ou ne hidden.bs.modal
se produise).
myModal.toggle()
Afficher
Ouvre manuellement un modal. Retourne à l'appelant avant que le modal n'ait été affiché (c'est-à-dire avant que l' shown.bs.modal
événement ne se produise).
myModal.show()
En outre, vous pouvez passer un élément DOM en tant qu'argument pouvant être reçu dans les événements modaux (en tant que relatedTarget
propriété).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
Cacher
Masque manuellement un modal. Retourne à l'appelant avant que le modal ait été masqué (c'est-à-dire avant que l' hidden.bs.modal
événement ne se produise).
myModal.hide()
handleUpdate
Réajustez manuellement la position du modal si la hauteur d'un modal change alors qu'il est ouvert (c'est-à-dire dans le cas où une barre de défilement apparaît).
myModal.handleUpdate()
Disposer
Détruit le modal d'un élément. (Supprime les données stockées sur l'élément DOM)
myModal.dispose()
getInstance
Méthode statique qui permet d'obtenir l'instance modale associée à un élément DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Méthode statique qui permet d'obtenir l'instance modale associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Evènements
La classe modale de Bootstrap expose quelques événements pour se connecter à la fonctionnalité modale. Tous les événements modaux sont déclenchés sur le modal lui-même (c'est-à-dire sur le <div class="modal">
).
Type d'événement | Description |
---|---|
show.bs.modal |
Cet événement se déclenche immédiatement lorsque la show méthode d'instance est appelée. S'il est causé par un clic, l'élément cliqué est disponible en tant que relatedTarget propriété de l'événement. |
shown.bs.modal |
Cet événement est déclenché lorsque le modal a été rendu visible à l'utilisateur (il attendra que les transitions CSS soient terminées). S'il est causé par un clic, l'élément cliqué est disponible en tant que relatedTarget propriété de l'événement. |
hide.bs.modal |
Cet événement est déclenché immédiatement lorsque la hide méthode d'instance a été appelée. |
hidden.bs.modal |
Cet événement est déclenché lorsque le modal a fini d'être caché à l'utilisateur (il attendra que les transitions CSS soient terminées). |
hidePrevented.bs.modal |
Cet événement est déclenché lorsque le modal est affiché, sa toile de fond est static et un clic en dehors du modal ou une pression sur la touche d'échappement est effectuée avec l'option clavier ou data-bs-keyboard définie sur false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})