Bootstrap Modal: Der ultimative Leitfaden zur Einbindung von Dialogfenstern

  1. Startseite
  2. Anleitung
  3. Modals

In dieser Anleitung erfährst du, wie du Bootstrap-Modals – oder auf Deutsch Dialogfenster – effizient in deine Webseite einbindest, anpasst und Inhalte dynamisch per Ajax nachlädst. Modals sind essenzielle Elemente, die helfen, Benutzererfahrung zu verbessern.

Was sind Bootstrap-Modals?

Bootstrap-Modals sind im Grunde div-Elemente, die sich über der Hauptseite legen und deren Hintergrund abdunkeln, sodass Links auf der eigentlichen Seite nicht mehr anklickbar sind. Sie eignen sich hervorragend für Benachrichtigungen, Formulare und vieles mehr.

So sieht ein Modal in Bootstrap übrigens aus.

<br>Bootstrap Modal mit Data-Attributen laden

 

Wie binde ich Modals ein?

Bootstrap bietet zwei Hauptmethoden zum Einbinden von Modals:

  1. entweder durch Verwendung von data-Attributen
  2. oder durch JavaScript.

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.

Beispiel Modal mit data-Attributen laden

Modal mit JavaScript laden

Die Verwendung von JavaScript bietet mehr Kontrolle über das Verhalten des Modals. Hier ein Beispiel:

$('#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");
});

Beispiel Modal mit Javascript laden

Anpassen der Modal-Größe und Animation

Bootstrap ermöglicht es, die Größe der Modals anzupassen. Du kannst zwischen groß (modal-lg), klein (modal-sm) oder der Standardgröße wählen.

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

Außerdem kannst du die Eingangsanimation des Modals deaktivieren, indem du die fade-Klasse weglässt:

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

Inhalte dynamisch per Ajax nachladen

Das Nachladen von Inhalten per Ajax vor dem Anzeigen des Modals ist ein leistungsfähiges Feature. Hier ein Beispiel, wie das gemacht werden kann:

$('#modal').on('show.bs.modal', function (event) {
 ...
 $.get('ajax-beispiel.php', function(data) {
 $('#modal').find('.modal-body').html(data);
 });
});

Beispiel Modal mit Javascript laden

Mobile Kompatibilität

Es ist wichtig zu beachten, dass Modals auf Smartphones problematisch sein können. Es ist ratsam, Modals auf mobilen Geräten zu vermeiden oder alternative Lösungen zu verwenden.

FAQ

Kann ich mehrere Modals gleichzeitig öffnen?

Nein, Bootstrap unterstützt nicht mehrere geöffnete Modals. Es ist empfehlenswert, immer nur ein Modal zur Zeit anzuzeigen.

Wo sollte ich den Modal-HTML-Code platzieren?

Es wird empfohlen, den Modal-HTML-Code direkt oberhalb des schließenden </body>-Elements zu platzieren.

Sind Modals auf Smartphones geeignet?

Es wird nicht empfohlen, Modals auf Smartphones zu verwenden, da sie oft nicht gut mit Touchscreens interagieren. Es ist besser, alternative Designs oder Elemente für mobile Geräte zu verwenden.

Zusätzliche Tipps und Best Practices

  • Verwende aussagekräftige Überschriften: Verwende innerhalb des Modals aussagekräftige Überschriften, um die Struktur klar zu machen und die Benutzerführung zu erleichtern.

  • Nutze ARIA-Attribute: ARIA-Attribute helfen dabei, die Barrierefreiheit deiner Modals zu verbessern. Zum Beispiel role="dialog" und aria-labelledby helfen Screenreadern, den Inhalt richtig zu interpretieren.

  • Teste auf verschiedenen Geräten: Stelle sicher, dass deine Modals auf verschiedenen Geräten und Browsern richtig funktionieren. Dies beinhaltet auch das Testen auf mobilen Geräten, auch wenn es empfohlen wird, Modals auf diesen zu vermeiden.

  • Vermeide zu viele Modals: Zu viele Modals können das Benutzererlebnis stören. Verwende sie sparsam und nur wenn notwendig.

  • Füge einen Schließen-Button hinzu: Es ist eine gute Praxis, einen leicht erkennbaren Schließen-Button im Modal hinzuzufügen, damit die Benutzer das Modal einfach schließen können.

Nach oben!