Source

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')
})

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" role="dialog">
  <div class="modal-dialog" role="document">
    <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-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>

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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

Centré verticalement

Ajouter .modal-dialog-centeredà .modal-dialogpour centrer verticalement le modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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>

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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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)
})

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" role="dialog" 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 role="dialog"et aria-labelledby="...", faisant référence au titre modal, à .modalet role="document"à lui- .modal-dialogmême. De plus, vous pouvez donner une description de votre boîte de dialogue modale avec aria-describedbysur .modal.

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 deux tailles facultatives, 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.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</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). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})