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

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  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.

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

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>

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.

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

<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" data-bs-dismiss="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" data-bs-dismiss="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>

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`	Dessous`576px`
`.modal-fullscreen-md-down`	Dessous`768px`
`.modal-fullscreen-lg-down`	Dessous`992px`
`.modal-fullscreen-xl-down`	Dessous`1200px`
`.modal-fullscreen-xxl-down`	Dessous`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Toupet

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 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 {
        @include border-radius(0);
      }

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

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

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

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>

Via Javascript

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Choix

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	Taper	Défaut	La description
`backdrop`	booléen ou la chaîne`'static'`	`true`	Inclut un élément modal-backdrop. Vous pouvez également spécifier `static`un fond qui ne ferme pas le modal au clic.
`keyboard`	booléen	`true`	Ferme le modal lorsque la touche d'échappement est enfoncée
`focus`	booléen	`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.modalou ne hidden.bs.modalse 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 relatedTargetproprié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

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

Type d'événement	La 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...
})