Passer au contenu principal Passer à la navigation dans les documents
Check
in English

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é.

Sur cette page

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 use 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 .modaldans 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' autofocusattribut HTML n'a aucun effet dans les modaux Bootstrap. Pour obtenir le même effet, utilisez du JavaScript personnalisé :
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
L'effet d'animation de ce composant dépend de la prefers-reduced-motionrequê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

Vous trouverez ci-dessous un exemple modal statique (ce qui signifie que ses positionet displayont é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.

Titre modal

Le corps du texte modal va ici.

<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 le fond est défini sur statique, le modal ne se ferme pas lorsque vous cliquez en dehors de celui-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-dialogpour 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" data-bs-toggle="popover" 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="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Utilisation de la grille

Utilisez le système de grille Bootstrap dans un modal en l'imbriquant .container-fluiddans 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 attributs HTMLevent.relatedTarget 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.

html 
<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>
const exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', event => {
  // Button that triggered the modal
  const button = event.relatedTarget
  // Extract info from data-bs-* attributes
  const 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.
  const modalTitle = exampleModal.querySelector('.modal-title')
  const 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-targetet . data-bs-togglePar 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.

Ouvrir le premier modal
html 
<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-transformvariable détermine l'état de transformation de .modal-dialogavant l'animation de fondu modal, la $modal-show-transformvariable 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 .fadeclasse 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-describedbysur .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 Classer Largeur maximale modale
Petit .modal-sm 300px
Défaut Aucun 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>

Mode 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.

Classer Disponibilité
.modal-fullscreen Toujours
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

CSS

variables

Ajouté dans v5.2.0

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les modaux utilisent désormais des variables CSS locales sur .modalet .modal-backdroppour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-width: #{$modal-md};
  --#{$prefix}modal-padding: #{$modal-inner-padding};
  --#{$prefix}modal-margin: #{$modal-dialog-margin};
  --#{$prefix}modal-color: #{$modal-content-color};
  --#{$prefix}modal-bg: #{$modal-content-bg};
  --#{$prefix}modal-border-color: #{$modal-content-border-color};
  --#{$prefix}modal-border-width: #{$modal-content-border-width};
  --#{$prefix}modal-border-radius: #{$modal-content-border-radius};
  --#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
  --#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
  --#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
  --#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
  --#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
  --#{$prefix}modal-header-border-color: #{$modal-header-border-color};
  --#{$prefix}modal-header-border-width: #{$modal-header-border-width};
  --#{$prefix}modal-title-line-height: #{$modal-title-line-height};
  --#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
  --#{$prefix}modal-footer-bg: #{$modal-footer-bg};
  --#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
  --#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
  
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Variables SSS

$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:        var(--#{$prefix}border-color-translucent);
$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:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-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-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$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 réactifs sont générés via la $breakpointscarte 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,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

Usage

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-backdroppour 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' dataattribut 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-targetcomme démontré ci-dessous :

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Bien que les deux méthodes de suppression d'un modal soient prises en charge, gardez à l'esprit que la suppression depuis l'extérieur d'une fenêtre modale ne correspond pas au modèle de boîte de dialogue ARIA Authoring Practices Guide (modal) . A vos risques et périls.

Via Javascript

Créez un modal avec une seule ligne de JavaScript :

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Choix

Comme les options peuvent être transmises via des attributs de données ou JavaScript, vous pouvez ajouter un nom d'option à data-bs-, comme dans data-bs-animation="{value}". Assurez-vous de changer le type de casse du nom de l'option de " camelCase " à " kebab-case " lors du passage des options via les attributs de données. Par exemple, utilisez à la data-bs-custom-class="beautifier"place de data-bs-customClass="beautifier".

Depuis Bootstrap 5.2.0, tous les composants prennent en charge un attribut de données expérimentaldata-bs-config réservé pouvant héberger une configuration de composant simple sous forme de chaîne JSON. Lorsqu'un élément a des attributs data-bs-config='{"delay":0, "title":123}'et , la valeur finale sera et les attributs de données séparés remplaceront les valeurs données sur . De plus, les attributs de données existants peuvent héberger des valeurs JSON telles que .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nom Taper Défaut La description
backdrop booléen,'static' true Inclut un élément modal-backdrop. Vous pouvez également spécifier staticun fond qui ne ferme pas le modal lorsque vous cliquez dessus.
focus booléen true Met le focus sur le modal lors de l'initialisation.
keyboard booléen true Ferme le modal lorsque la touche d'échappement est enfoncée.

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.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Méthode La description
dispose Détruit le modal d'un élément. (Supprime les données stockées sur l'élément DOM)
getInstance Méthode statique qui permet d'obtenir l'instance modale associée à un élément DOM.
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.
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).
hide 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).
show 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). 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 relatedTargetpropriété). (c'est-à-dire const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle 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.modalou ne hidden.bs.modalse produise).

Évé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">).

Événement La description
hide.bs.modal Cet événement est déclenché immédiatement lorsque la hidemé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 staticet un clic en dehors du modal est effectué. L'événement est également déclenché lorsque la touche d'échappement est enfoncée et que l' keyboardoption est définie sur false.
show.bs.modal Cet événement se déclenche immédiatement lorsque la showméthode d'instance est appelée. S'il est causé par un clic, l'élément cliqué est disponible en tant que relatedTargetproprié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 relatedTargetpropriété de l'événement. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})