Aufbau des Dialogs

<div class="modal fade" aria-labelledby="exampleModalLabel"
     aria-hidden="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">x</span>
              <span class="sr-only">Close</span>
            </button>
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Headline</h4>
            </div>
            <div class="modal-body">
                <p>Content...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Schließen</button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

Initialisierung des Dialogs

<!-- Der Button öffnet den Modal-Dialog -->
<button type="button" class="btn btn-default" data-toggle="modal"
        data-target="#modal-init-demo">Modal-Dialog öffnen</button>

<!-- Der Modal-Dialog -->
<div class="modal fade" aria-labelledby="exampleModalLabel"
     aria-hidden="true" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">x</span>
              <span class="sr-only">Close</span>
            </button>
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel">Headline</h4>
            </div>
            <div class="modal-body">
                <p>Content...</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">Schließen</button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

Datenmanagement

Oft sollen Daten im Modal-Dialog von außen beeinflussbar sein, beispielsweise wenn ein Formular im Dialog vorausgefüllt werden soll.

In einem zweiten Schritt sollen beim Absenden des Formulars die Daten verarbeitet werden können.

Das folgende Beispiel zeigt diese Fälle:

<!-- Der Button öffnet den Modal-Dialog -->
<button type="button" class="btn btn-default" data-toggle="modal" data-init-value="1"
  data-target="#modal-init-demo2">Modal-Dialog mit &lt;1&gt; öffnen</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-init-value="2"
  data-target="#modal-init-demo2">Modal-Dialog mit &lt;2&gt; öffnen</button>

<!-- Der Modal-Dialog -->
<div id="modal-init-demo2" class="modal fade"
     aria-labelledby="exampleModalLabel3" aria-hidden="true" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <form name="exampleModalForm3">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">x</span>
          <span class="sr-only">Close</span>
        </button>
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel3">Headline</h4>
        </div>
        <div class="modal-body">
          <div class="form-input-set">
            <label for="text-modal">Value</label>
            <input type="text" class="form-input"
                   name="text-modal" id="text-modal">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default"
                  data-dismiss="modal">Schließen</button>
          <button type="submit" class="btn btn-default">Senden</button>
        </div>
      </form>
    </div>
  </div>
</div>

JavaScript:

// Daten übermitteln
$('#modal-init-demo2').on('show.tc.modal', function (event) {
  var $button = $(event.relatedTarget) // der betätigte Button
  var value = $button.data('init-value') // Wert aus HTML5-Data auslesen

  // Wert in Modal-Formuar übernehmen
  var $modal = $(this)
  $modal.find('input[name="text-modal"]').val(value)
})

// Daten abholen
$('form[name="exampleModalForm3"]').on('submit', function (event) {
  event.preventDefault() // Absenden des Formular unterdrücken

  var $modal = $('#modal-init-demo2')
  $modal.modal('hide') // den Modal-Dialog schließen

  var $form = $(this)
  alert($form.serialize()) // Daten aus dem Formular übernehmen
})

Größe

Die Größe des Modal-Dialogs kann mit den CSS-Klassen .modal-small und .modal-large beeinflusst werden:

<!-- groß -->
<div class="modal fade" aria-labelledby="exampleModalLabel4"
    aria-hidden="true" role="dialog">
  <div class="modal-dialog modal-large">
    ...
  </div>
</div>

<!-- klein -->
<div class="modal fade" aria-labelledby="exampleModalLabel4"
    aria-hidden="true" role="dialog">
  <div class="modal-dialog modal-small">
    ...
  </div>
</div>

Verwendung

Der Modal-Dialog kann derzeit über zwei Schnittstellen gestartet werden.

HTML Attribut

<button type="button" data-toggle="modal" data-target="#eg-modal">Modal-Dialog</button>

JavaScript

$('#eg-modal').modal(options)
Optionen
Name Typ Standard Beschreibung
backdrop Bool true Gibt an ob der Modal-Dialog durch einen Hintergrund abgesetzt werden soll. Der Modal-Dialog wird bei einem Klick auf den Hintergrund geschlossen.
keyboard Bool true Gibt an, ob der Modal-Dialog durch drücken der ESC-Taste geschlossen wird.
show Bool true Gibt an ob der der Modal-Dialog beim Initialisieren angezeigt werden soll.
// Initialisieren des Modal-Dialogs ohne direkte Anzeige
$('#eg-modal').modal({ show: false })
Events
Typ Beschreibung
show.tc.modal Dieses Event tritt noch vor dem eigentlichen Anzeigen des Modal-Dialogs auf.
shown.tc.modal Dieses Event tritt auf, wenn der Modal-Dialog fertig angezeigt wird.
hide.tc.modal Dieses Event tritt noch vor dem eigentlichen Schließen des Modal-Dialogs auf.
hidden.tc.modal Dieses Event tritt auf, wenn der Modal-Dialog fertig geschlossen wurde.
$('#eg-modal').on('hide.tc.modal', function (event) {
  // ...
})