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 <1> öffnen</button> <button type="button" class="btn btn-default" data-toggle="modal" data-init-value="2" data-target="#modal-init-demo2">Modal-Dialog mit <2> ö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)
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 })
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) { // ... })