twitter-bootstrap
Modale Dialoge

Bemerkungen

Grundlegende HTML-Verwendung

Ein modifizierter Bootstrap-Dialog ist eine Bootstrap-Komponente, die ein modales Dialogfenster erstellt, das über den Inhalt auf Seitenebene schwebt.

Hier ein Beispiel für die grundlegende Verwendung eines Bootstrap-Modaldialogfelds in 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 -->

Grundlegende Verwendung und Initialisierung von Javascript

Modale Dialogkomponenten können über die jQuery-Funktion mit der Funktion $('#myModal').modal(options) instanziiert werden, wobei $('#myModal') eine Referenz auf den spezifischen modalen Dialog ist und options ein Javascript-Objekt ist die Standardattribute des modalen Dialogs.

Mit dem options können mehrere Eigenschaften definiert werden, die das Verhalten des modalen Dialogfelds beeinflussen. Diese Eigenschaften sind als solche definiert:

• Die backdrop Eigenschaft ermöglicht es einen Benutzer zu definieren , ob sie ein grauer Hintergrund Overlay hinter dem modalen Dialogfeld angezeigt werden sollen. Beide booleschen Werte und der String "static" werden erkannt. Wenn "statisch" angegeben ist, wird das modale Dialogfeld nicht geschlossen, wenn ein Benutzer auf die Hintergrundüberlagerung klickt.
• Mit der keyboard kann ein Benutzer festlegen, ob der modale Dialog geschlossen werden soll, wenn die Escape-Taste auf der Tastatur gedrückt wird.
• Mit der show Eigenschaft kann ein Benutzer festlegen, ob der modale Dialog angezeigt werden soll, wenn der modale Modus initialisiert wird.

Hier ist ein Beispiel für die grundlegende Verwendung von Javascript:

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

Wie bei anderen Bootstrap-Komponenten können die Optionen des Modals auch über Datenattribute in HTML angegeben werden.