Bootstrap - Modals: Ein Leitfaden für Anfänger

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die aufregende Welt der Bootstrap-Modals. Keine Sorge, wenn du noch nie von ihnen gehört hast – bis zum Ende dieses Tutorials wirst du Pop-up-Fenster wie ein Profi erstellen können!

Was ist ein Modal?

Bevor wir loslegen, lassen wir uns klarmachen, was ein Modal ist. Stell dir vor, du liest ein Buch und plötzlich erscheint eine kleine Notizzettel mit wichtigen Informationen. Das ist im Grunde genommen, was ein Modal auf einer Webseite macht! Es ist ein Dialogfenster oder Pop-up-Fenster, das über der aktuellen Seite erscheint.

Modal-Komponenten

Lassen wir mit der grundlegenden Struktur einer Bootstrap-Modal beginnen:

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal-Titel</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
</div>
<div class="modal-body">
<p>Text des Modal-Körpers kommt hier hin.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
<button type="button" class="btn btn-primary">Änderungen speichern</button>
</div>
</div>
</div>
</div>

Lassen wir das auseinandernehmen:

• Das äußerste <div> mit der Klasse "modal" ist der Hauptbehälter.
• Innen haben wir den "modal-dialog", der die Form und Position des Modals kontrolliert.
• Der "modal-content" enthält die tatsächlichen Inhalte unseres Modals.
• Wir haben dann drei Abschnitte: Kopfzeile, Körper und Fußzeile.

Statisches Hintergrund

Manchmal möchtest du, dass dein Modal erhalten bleibt, bis der Benutzer damit interagiert. Da kommt das statische Hintergrund ins Spiel:

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- Modal-Inhalt hier -->
</div>

Durch Hinzufügen von data-bs-backdrop="static" wird das Modal nicht geschlossen, wenn außerhalb thereof geklickt wird. data-bs-keyboard="false" verhindert das Schließen mit der Esc-Taste.

Scrollbares Modal

Viel Inhalt? Kein Problem! Mach dein Modal scrollbar:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Modal-Inhalt hier -->
</div>

Hinzufügen der modal-dialog-scrollable-Klasse ermöglicht das Scrollen im Modal-Körper, während Kopf- und Fußzeile an Ort und Stelle bleiben.

Vertikal zentriert

Möchtest du dein Modal genau in der Mitte des Bildschirms? Ganz einfach!

<div class="modal-dialog modal-dialog-centered">
<!-- Modal-Inhalt hier -->
</div>

Die modal-dialog-centered-Klasse zaubert dein Modal vertikal in die Mitte.

Tooltips und Popovers

Du kannst sogar Tooltips und Popovers in deinen Modals verwenden. Vergiss nicht, sie zu initialisieren:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

Verwendung des Rasters

Bootstrap's Rastersystem funktioniert auch innerhalb von Modals! Hier ist ein Beispiel:

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

Dies erstellt eine Zweispaltenanordnung im Inneren deines Modal-Körpers.

Varianter Modal-Inhalt

Du kannst den Inhalt deines Modals dynamisch ändern. So geht's:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = 'Neue Nachricht an ' + recipient
modalBodyInput.value = recipient
})

Dieser Script ändert den Modal-Inhalt basierend auf der Taste, die es ausgelöst hat.

Wechsel zwischen Modals

Du kannst sogar zwischen verschiedenen Modals wechseln:

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- Erster Modal-Inhalt -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Zweites Modal öffnen</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- Zweiter Modal-Inhalt -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Zurück zum ersten</button>
</div>

Ändern der Animation

Möchtest du die Einführung deines Modals aufpeppen? Probiere, die Animation zu ändern:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Modal-Inhalt -->
</div>

Die fade-Klasse fügt eine nette Ausblendeffekt hinzu. Du kannst benutzerdefinierte Animationen mit CSS erstellen!

Dynamische Höhen

Modals können ihre Höhe basierend auf dem Inhalt anpassen:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Modal-Inhalt mit variabler Höhe -->
</div>

Die modal-dialog-scrollable-Klasse stellt sicher, dass dein Modal unabhängig von der Inhaltshöhe gut aussieht.

Barrierefreiheit

Denke immer an Barrierefreiheit! Verwende aria-labelledby, um auf den Modal-Titel zu verweisen:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal-Titel</h5>
<!-- Rest des Modal-Inhaltes -->
</div>
</div>
</div>
</div>

Optional sizes

Modals gibt es in verschiedenen Größen:

<!-- Kleines Modal -->
<div class="modal-dialog modal-sm">...</div>

<!-- Großes Modal -->
<div class="modal-dialog modal-lg">...</div>

<!-- Extragroßes Modal -->
<div class="modal-dialog modal-xl">...</div>

Vollbild-Modal

Möchtest du, dass dein Modal den gesamten Bildschirm einnimmt? Verwende die Vollbild-Klassen:

<div class="modal-dialog modal-fullscreen">
<!-- Modal-Inhalt -->
</div>

Du kannst es auch nur auf bestimmten Bildschirmgrößen vollbildartig machen:

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- Modal-Inhalt -->
</div>

Dieses Modal wird auf kleinen Bildschirmen und darunter vollbildartig.

Und das war's! Du bist jetzt mit dem Wissen ausgerüstet, um erstaunliche Modals mit Bootstrap zu erstellen. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Konzepten zu experimentieren. Viel Spaß beim Coden!

Credits: Image by storyset