Bootstrap - Modal-Demo

Was ist ein Modal?

Hallo, angehende Web-Entwickler! Heute tauchen wir ein in die aufregende Welt der Bootstrap-Modals. Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich hier, um Sie auf dieser Reise Schritt für Schritt zu führen. Also holen Sie sich Ihr lieblingsGetränk, machen Sie es sich gemütlich und lassen Sie uns gemeinsam dieses Modal-Abenteuer beginnen!

Definition und Zweck

Ein Modal, in terms der Web-Entwicklung, ist wie ein Pop-up-Fenster, das oben auf der aktuellen Seite erscheint. Es ist eine großartige Möglichkeit, Inhalte anzuzeigen, ohne die aktuelle Ansicht zu verlassen. Stellen Sie sich vor, Sie lesen einen Artikel und plötzlich möchten Sie mehr Informationen über einen bestimmten Begriff. Anstatt eine neue Seite zu öffnen, kann ein Modal mit den zusätzlichen Details erscheinen, allowing Sie schnell zu Ihrer Lektüre zurückzukehren. Cool, oder?

Bootstrap, unser zuverlässiger Freund im Web-Design, bietet eine hervorragende Modal-Komponente, die sowohl einfach zu bedienen als auch hochgradig anpassbar ist. Lassen Sie uns erkunden, wie man sie implementiert!

Grundlegende Modal-Struktur

HTML-Struktur

Beginnen wir mit der grundlegenden HTML-Struktur eines Bootstrap-Modals:

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal-Titel</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Modal-Inhaltstext kommt hier hin.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
<button type="button" class="btn btn-primary">Änderungen speichern</button>
</div>
</div>
</div>
</div>

Lassen Sie uns das auseinandernehmen:

1. Das äußerste <div> mit der Klasse modal ist der Container für unser gesamtes Modal.
2. Innen haben wir ein modal-dialog, das den Modal-Inhalt zentriert.
3. Das modal-content-div hält den tatsächlichen Inhalt unseres Modals.
4. Wir haben dann drei Hauptabschnitte:

• modal-header: Enthält den Titel und den Schließen-Button.
• modal-body: Wo der Hauptinhalt hinkommt.
• modal-footer: Enthält normalerweise Aktions-Buttons.

Auslösen des Modals

Nun, wie machen wir dieses Modal sichtbar? Wir brauchen einen Auslöser! Dies ist typischerweise ein Button:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Demo-Modal starten
</button>

Beachten Sie das data-toggle="modal" und data-target="#exampleModal". Dies tells Bootstrap, was zu tun ist (ein Modal umschalten) und welches Modal angezeigt werden soll (das mit der ID "exampleModal").

Vergessen Sie nicht, eine id zu Ihrem Modal hinzuzufügen, die dem data-target entspricht:

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<!-- Modal-Inhalt hier -->
</div>

Anpassung Ihres Modals

Größen

Bootstrap ermöglicht es Ihnen, die Größe Ihres Modals leicht zu ändern. Fügen Sie einfach eine Klasse zum modal-dialog-div hinzu:

<!-- 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>

Zentriertes Modal

Möchten Sie Ihr Modal perfekt zentriert? Fügen Sie die Klasse modal-dialog-centered hinzu:

<div class="modal-dialog modal-dialog-centered">...</div>

Scrollbares Modal

Ist Ihr Modal-Inhalt lang, können Sie es scrollbar machen:

<div class="modal-dialog modal-dialog-scrollable">...</div>

Hinzufügen von Funktionalität mit JavaScript

Während Bootstrap's Datenattribute großartig für grundlegende Funktionalität sind, manchmal benötigen Sie mehr Kontrolle. Das ist, wo JavaScript ins Spiel kommt!

// Das Modal anzeigen
$('#exampleModal').modal('show');

// Das Modal ausblenden
$('#exampleModal').modal('hide');

// Das Modal umschalten
$('#exampleModal').modal('toggle');

Sie können auch auf Modal-Ereignisse hören:

$('#exampleModal').on('shown.bs.modal', function () {
console.log('Modal ist jetzt sichtbar!');
})

Praktisches Beispiel: Ein "Löschbestätigung"-Modal

Lassen Sie uns alles zusammenbringen mit einem realen Beispiel. Stellen wir uns vor, wir bauen eine Aufgabenliste-App und wir möchten eine Bestätigung vor dem Löschen einer Aufgabe:

<!-- Löschen-Button -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
Aufgabe löschen
</button>

<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Löschung bestätigen</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Sind Sie sicher, dass Sie diese Aufgabe löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
<button type="button" class="btn btn-danger" id="confirmDelete">Löschen</button>
</div>
</div>
</div>
</div>

Und hier ist etwas JavaScript, um die Löschung zu verarbeiten:

$('#confirmDelete').on('click', function() {
// Code zum Löschen der Aufgabe kommt hier hin
console.log('Aufgabe gelöscht!');
$('#deleteModal').modal('hide');
});

Schlussfolgerung

Glückwunsch! Sie haben gerade die Ins und Outs der Bootstrap-Modals gelernt. Von der grundlegenden Struktur bis hin zur Anpassung und sogar ein praktisches Beispiel, Sie sind nun gerüstet, diese leistungsstarke Funktion zu Ihren Web-Projekten hinzuzufügen.

Erinnern Sie sich daran, Übung macht den Meister. Versuchen Sie, verschiedene Arten von Modals zu erstellen, experimentieren Sie mit Größen und Positionierungen und vor allem, haben Sie Spaß dabei! Wer weiß, vielleicht werden Sie ja der "Modal-Meister" unter Ihren codenden Freunden.

Happy Coding und mögen Ihre Modals immer zur richtigen Zeit erscheinen!

Credits: Image by storyset