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

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é :
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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 event.relatedTargetet les attributs HTMLdata-* (éventuellement via jQuery ) pour faire varier le contenu du modal en fonction du bouton sur lequel vous avez cliqué.

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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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').modal('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>

Usage

Le plugin modal bascule votre contenu caché à la demande, via des attributs de données ou JavaScript. Il ajoute également .modal-openau <body>comportement de défilement par défaut pour remplacer 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-toggle="modal"un élément de contrôleur, comme un bouton, avec un data-target="#foo"ou href="#foo"pour cibler un modal spécifique à basculer.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Via Javascript

Appelez un modal avec id myModalavec une seule ligne de JavaScript :

$('#myModal').modal(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-, comme dans data-backdrop="".

Nom Taper Défaut La description
toile de fond booléen ou la chaîne'static' vrai Inclut un élément modal-backdrop. Vous pouvez également spécifier staticun fond qui ne ferme pas le modal au clic.
clavier booléen vrai Ferme le modal lorsque la touche d'échappement est enfoncée
se concentrer booléen vrai Met le focus sur le modal lors de l'initialisation.
Afficher booléen vrai Affiche le modal lorsqu'il est initialisé.

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 .

.modal(options)

Active votre contenu en tant que modal. Accepte une option facultative object.

$('#myModal').modal({
  keyboard: false
})

.modal('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).

$('#myModal').modal('toggle')

.modal('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).

$('#myModal').modal('show')

.modal('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).

$('#myModal').modal('hide')

.modal('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').modal('handleUpdate')

.modal('dispose')

Détruit le modal d'un élément.

É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 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.
montré.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.
hide.bs.modal Cet événement est déclenché immédiatement lorsque la hideméthode d'instance a été appelée.
caché.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 ou une pression sur la touche d'échappement est effectuée avec l'option clavier ou data-keyboarddéfinie sur false. 
$('#myModal').on('hidden.bs.modal', function (event) {
  // do something...
})