Exemples

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title">Titre de la fenêtre modale</h1>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Contenu de la fenêtre modale</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-default">Valider</button>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal">
  Afficher la fenêtre modale
</button>
<div class="modal" tabindex="-1" role="dialog" id="exampleModal" >
 ...
</div>

Lorsque l'attribut data-backdrop="static" est ajouté à la fenêtre modale, Celle ci ne se ferme plus lors d'un clique à l'extérieur de la fenêtre. 

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModalStatic">
  Afficher la fenêtre modale
</button>
<div data-backdrop="static" class="modal" tabindex="-1" role="dialog" id="exampleModal" >
 ...
</div>

Scrolling

Lorsque le contenu de la fenêtre est modale est trop long pour l'écran, il peut défiler indépendamment du contenu de la page.

Le corps de la fenêtre modale peut aussi servir de zone de défilement en utilisant les styles .modal-dialog-scrollable sur la modale ou .fixed-height sur l'un des élèments du corps de la modale (occupant 50% de l'écran au maximum).

<div id="exampleModalScrollable" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
 ...
  </div>
</div>
<div id="exampleModalScrollableFixed" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog" role="document">
  ...
 
    <div class="modal-body">
      <div class="fixed-height">
      ...
      </div>
    </div>
  </div>
</div>

Positionnement

Ajouter la classe .modal-dialog-centered pour centrer la fenêtre verticalement sur l'écran.

<div id="exampleModalCentered" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog modal-dialog-centered" role="document">
 ...
  </div>
</div>

Tailles de fenêtre modale

<div id="" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog modal-xxlg" role="document">
  ...
  </div>
</div>

<div id="" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog modal-xlg" role="document">
  ...
  </div>
</div>

<div id="" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog modal-lg" role="document">
  ...
  </div>
</div>

<div id="" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog modal" role="document">
  ...
  </div>
</div>

<div id="" class="modal fade show" tabindex="-1" role="dialog" aria-labelledby="">
  <div class="modal-dialog modal-sm" role="document">
  ...
  </div>
</div>