Bootstrap 4 Schnellstart – Modals

Modals

Modals sind Dialogfenster, die sich über den ganzen Browser-Bildschirm legen und damit im Vordergrund stehen. Um so einen Dialog zu erstellen, benötigt man neben Bootstrap-Klassen zusätzlich etwas JavaScript.

(Falls du dich noch nicht mit JavaScript auskennst, schau dir den LerneProgrammieren JavaScript-Schnellstart an).

Hier ist der Code für ein Modal:

<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">Titel des Dialoges</h5>
        <button class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Hier gibt es etwas Wichtiges zu besprechen! </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">Bestätigen</button>
      </div>
    </div>
  </div>
</div>

Zugegeben das ist eine ganze Menge Code. Und leider noch nicht alles. Wenn du die Struktur durchblickt hast, ist es jedoch relativ einfach.

Grundaufbau

Wir gehen einmal vom obersten Element in das unterste Kindelement.

1. Zum einen hast du das übergeordnete div mit der Klasse modal.

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

2. Darunter liegt ein div mit der Klasse modal-dialog. Diese beiden sind notwendig, damit Bootstrap das modal im Vordergrund anzeigen kann.

<div class="modal-dialog" role="document">

3. Der Inhalt des Dialogs kommt in ein weitere div mit der Klasse modal-content.

<div class="modal-content">

4. Der Inhalt kann in 3 Bereiche aufgeteilt werden: Header, Body und Footer mit den passenden Klassen modal-header, modal-body, modal-footer. Je nachdem was du konkret brauchst.

<div class="modal-header"></div>


<div class="modal-body"> </div>


<div class="modal-footer"> </div>

5. Dann gibt es ein paar Besonderheiten im Inhalt. Die Schließen-Knöpfe im Header und Footerbereich, welche das Attribut data-dismiss="modal" erhalten.

<button class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>

Der Bestätigen-Knopf muss logischerweise über JavaScript abgefangen werden.

Zum JavaScript kommen wir noch gleich.

Optionen und Konfiguration

An dem Element mit der Klasse modal-dialog gibt es viele Einstellmöglichkeiten, wie zum Beispiel Scrollbare Modale mit der Klasse modal-dialog-scrollable, für Modale mit viel Inhalt.

Vertikal zentrieren kann man einen Dialog mit der Klasse modal-dialog-centered.

Verschiedene Größen der Dialoge erreichst du mit den Klasse modal-sm (klein), modal-lg (groß) und modal-xl (extra groß).

<div class="modal-dialog modal-dialog-xl modal-dialog-centered">

In die Dialoge kannst du jegliches HTML packen, was dir einfällt. Zum Beispiel ein Kontaktformular oder einen Warenkorb, wenn du einen Shop betreiben willst.

Um einen Modal zu Öffnen und zu schließen, bietet sich JavaScript an. Falls du aber wirklich nur eine Anzeige des Modals benötigst, kannst du dem modal-Element ein id-Attribut geben z.B.

<div class="modal" id=”dialog1” tabindex="-1" role="dialog">

Über eine Id (z.B. "dialog1") kannst du nun das Modal über einen Button triggern. Der Button benötigt dafür zwei Attribute: data-toggle="modal" und das Attribut data-target mit dem Selektor, bei der Id wäre das z.B. data-target="#dialog1".

<button class="btn btn-primary" data-toggle="modal" data-target="#dialog1">Zeig was!</button>

JavaScript

Sobald du deinen Modal per Selektor anwählen kannst (fall du nicht weißt, was ein Selektor ist schaue in den CSS und jQuery-Schnellkurs rein), ist es möglich den Dialog per JavaScript zu öffnen.

Hat unser Modal die id="dialog1" können wir den Dialog so mit JavaScript starten:

$('#dialog1‘).modal('show');

Der Parameter-String "show" gibt an, dass der Dialog gezeigt werden soll. Mit "hide" können wir diesen auch wieder schließen.

$('#dialog1‘).modal('hide');

Damit kennst du die Basics der Bootstrap-Modals und bist in der Lage einfache Dialoge zu erstellen.

Alle Einstellungen der Modals im Detail zu erklären, würde den Rahmen des Schnellkurses sprengen und dich schnell langweilen. Benötigst du hier etwas spezielles, wie zum Beispiel Events oder andere JavaScript-Befehle schau in die Dokumentation von Bootstrap (siehe nächstes Modul).

In der Übung kannst du diese Modals einmal in Aktion sehen und ausprobieren.