Modal in Bootstrap - Eine Anleitung

In dieser Anleitung möchte ich dir zeigen, wie du in Bootstrap ein Modal (auf deutsch Dialogfenster) in deine Webseite einbindest, anpasst und Inhalt dynamisch per Ajax nachlädst.

Keine Lust zum Lesen, dann springe direkt zum Abschnitt, der dich interessiert:

Was ist ein Modal?
Modal verwenden
Größe / Animation
Content per Ajax laden
Tipps zum Umgang mit Modals

Ein Modal ist nichts anderes als ein div-Element, dass sich über deine Seite legt. Dabei erscheint ein grauer Hintergrund und Links auf der eigentlichen Seite sind nicht mehr anklickbar.

So sieht ein Modal in Bootstrap übrigens aus.

<br>Bootstrap Modal mit Data-Attributen laden

 

Modals einbinden - So funktioniert's

Wie bei Bootstrap bekannt, kann ein Modal entweder durch data-Attribute aufgerufen werden oder per Javascript geladen werden. Für beide Vorgehensweisen habe ich Beispiele erstellt.

Modal mit data-Attributen laden

Mit der Klasse data-toggle="modal" legst du fest, dass ein klickbares Element (z. B. Link oder Button) ein Modal/ Dialogfenster öffnet.
Die Klasse data-modal="#modal1" verweist auf das Modal selbst, wobei #modal1 die ID des Modals ist.
Es genügen zwei CSS-Klassen, um ein Modal mittels data-Attributen aufzurufen.

Beispiele: Modal mit data-Attributen laden

Modal mit JavaScript laden

Die zweite mächtigere Methode ein Modal anzuzeigen bietet JavaScript. Hierbei werden verschiedenen Optionen übergeben sowie die Steuerung, wann das Modal angezeigt werden soll (z. B: nach einer Aktion).

$('#myModal').modal({
keyboard: true, //ESC-Taste schließt Modal
backdrop: true, //beim Klick außerhalb des Modals, wird dieses geschlossen (sonst "static")
show: true, //Modal wird nach dem Initialisieren angezeigt
});

Mit JavaScript ist es möglich auf Methodenaufrufe mit folgenden Modal-Events zu reagieren.

Methode Event Bemerkung
modal('show') show.bs.modal Event wird sofort nach dem Aufruf der show()-Methode aufgerufen.
Der auslösende Klick kann durch relatedTarget identifiziert werden.
modal('show') shown.bs.modal Event feuert nachdem Modal sichtbar ist (+ alle CSS-Animationen beendet wurden)
Der auslösende Klick kann durch relatedTarget identifiziert werden.
modal('hide') hide.bs.modal Event wird sofort nach dem Aufruf der hide()-Methode aufgerufen.
modal('hide') hidden.bs.modal Event feuert nachdem Modal ausgeblendet (+ alle CSS-Animationen beendet wurden)

Anstelle von show/hide kann man auch modal('toggle') verwenden,
um das Modal bei jedem Klick abwechselnd ein- oder auszublenden.

Und so kann man eine Modal-Methode in JS aufrufen.

var myModal = $('#myModal').modal({show:false}); //Modal erzeugen, aber nicht gleich einblenden
$('a.btn').click(function(e) { //bei Klick auf <a class="btn"... wird #myModal angezeigt
myModal.modal('show');
});

So sieht das Abfangen eines Events in JS aus:

$('#myModal').on('shown.bs.modal', function (e) {
  console.log("Das Modal wurde eingeblendet");
});

Beispiele: Modal mit Javascript laden

Modal Größe / Animation

Modals können in drei verschiedenen Größen angezeigt werden

<div class="modal-dialog modal-lg">

zeigt ein breites Dialogfenster an, wohingegen

<div class="modal-dialog modal-sm">

ein schmales Modal anzeigt. Lässt man beide Klassen weg wird das Modal in der Standard-Größe gezeigt.

Beispiele: verschiedene Modal-Größen

Um ein Modal ohne Eingangsanimation ("Herunterschieben") zu starten, muss man einfach die fade-Klasse weglassen.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="...">

im Vergleich dazu das Standardverhalten mit Animation

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

Beispiele: Modal mit und ohne Animation

Modal Content per Ajax laden

Ein wichtiger Aspekt bei der Verwendung von Modals ist das dynamische Nachladen von Seiteninhalt, bevor das Modal angezeigt wird.
Hierbei wird ein Ajax-Request ausgeführt, der den Content entweder als Text oder JSON-Objekt entgegen nimmt und in den modal-body einfügt.

Das Ganze funktioniert so perferkt, dass man ausgehend vom angeklickten Button unterschiedlichen Ajax-Content laden kann.
Klingt kompliziert, ist aber eigentlicht ganz einfach.

$(function() {

  //Bevor das Modal angezeigt wird, holen wir den Content via Ajax-Request
  $('#modal').on('show.bs.modal', function (event) {
    var button_clicked = $(event.relatedTarget) // welcher Button wurde geklickt?
    var format = button_clicked.data('format') // Hole das aktuelle Format über ein weiteres data-Attribut (data-format)

    //führe den Ajax-Request durch und passen den modal-body an
    if(format=="json") {
      $.get('ajax-beispiel.php?format=' + format,function(json) {
        $('#modal').find('.modal-body').html(json.message)
      },'json');
    } else {
      $.get('ajax-beispiel.php?format=' + format,function(text) {
        $('#modal').find('.modal-body').html(text)
      });
    }     

    //und passen zum Schluß noch die Modal-Überschrift an
    $('#modal').find('.modal-title').text('Modal mit dynamisch Inhalt ('+format+')');  
  });

});

Beispiele: Modal Content mit Ajax laden

Was du noch wissen musst

Folgende 3 Dinge solltest du beachten, wenn du mit Modals arbeitest:

  • Mehrere geöffnete Modals werden in Bootstrap nicht unterstützt
  • Modal-HTML-Code am besten direkt oberhalb des schließenden </body> Elementes platzieren
  • Modals und Smartphones vertragen sich nicht gut, versuche am besten dort ganz auf Modals zu verzichten ;-)
Hast du eine Frage zu dieser Seite?
Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK