Modale

Die Modal-Komponente von Bootstrap ist ein hilfreiches Werkzeug, um interaktive Inhalte wie Anmeldeformulare, Bildergalerien oder Warnungen zu präsentieren. Modals sind im Wesentlichen Dialogfelder, die über dem Hauptinhalt erscheinen und eine Benutzerinteraktion erfordern, um geschlossen zu werden. Sie können durch verschiedene Ereignisse wie Schaltflächenklicks, Links oder JavaScript-Funktionen aktiviert werden.

Hauptmerkmale

Bootstrap-Modals bieten anpassbare Größen, Animationen, Hintergründe und Positionierung. Sie unterstützen verschiedene Arten von Inhalten und können durch unterschiedliche Ereignisse ausgelöst werden. Sie sind auch für alle Benutzer zugänglich und können durch das Hinzufügen von ARIA-Attributen und Fokusmanagement weiter verbessert werden.

Verwendungs-Klassen

• modal: Basisklasse zum Erstellen eines Modal-Dialogs;
• modal-dialog: Container für den Modal-Inhalt;
• modal-content: Wrapper für den Modal-Kopf, -Körper und -Fuß;
• modal-header: Container für den Modal-Titel und optionalen Schließen-Button;
• modal-title: Stiliert den Titel des Modals;
• modal-body: Container für den Hauptinhalt des Modals;
• modal-footer: Container für Schaltflächen oder zusätzlichen Inhalt im Modal-Fuß;
• fade: Wendet eine Fade-in-Animation auf das Modal für sanfte Übergänge an;
• modal-dialog-centered: Zentriert das Modal vertikal innerhalb des Ansichtsfensters;
• modal-static: Verhindert, dass das Modal durch Klicken außerhalb oder Drücken der Escape-Taste geschlossen wird.

Beispiel 1: Einfaches Modal

Beispiel 2: Animiertes Modal