twitter-bootstrap
Dialogues modaux

Remarques

Utilisation HTML de base

Une boîte de dialogue modale Bootstrap est un composant Bootstrap qui crée une fenêtre de dialogue modale qui flotte sur le contenu au niveau de la page.

Voici un exemple d'utilisation basique d'un dialogue modal Bootstrap en HTML:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Utilisation et initialisation Javascript de base

Les composants du dialogue modal peuvent être instanciés via jQuery avec la fonction $('#myModal').modal(options) , où $('#myModal') est une référence de haut niveau au dialogue modal spécifique et options est un objet Javascript spécifiant les attributs par défaut du dialogue modal.

L'objet options permet de définir plusieurs propriétés qui affecteront le comportement de la boîte de dialogue modale. Ces propriétés sont définies en tant que telles:

• La propriété backdrop permet à un utilisateur de définir si une superposition d'arrière-plan grise doit apparaître ou non derrière la boîte de dialogue modale. Les deux valeurs booléennes et la chaîne "static" sont reconnues. Si "static" est spécifié, la boîte de dialogue modale ne sera pas fermée lorsqu'un utilisateur clique sur la superposition d'arrière-plan.
• La propriété keyboard permet à un utilisateur de définir si la boîte de dialogue modale doit être fermée ou non lorsque la touche d'échappement est enfoncée sur le clavier.
• La propriété show permet à un utilisateur de définir si oui ou non la boîte de dialogue modale doit apparaître lorsque le modal est initialisé.

Voici un exemple d'utilisation de Javascript de base:

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

Comme avec les autres composants Bootstrap, les options du modal peuvent également être spécifiées en HTML via des attributs de données.