Beispiel: Bootstrap Modal

Bootstrap

Ein Bootstrap Modal ist ein Overlay-Fenster, das auf dem Bildschirm angezeigt wird, um bestimmte Inhalte zu präsentieren, ohne dass der Benutzer die aktuelle Seite verlassen muss. Es ist ein nützliches Werkzeug für

modale Dialoge,
Formulare,
herausstechende Inhalte (wie Datenschutzerklärung, Cookie Consent)

und andere interaktive Elemente, die in einem Popup-Stil angezeigt werden sollen.

Das Beispiel detailliert erklärt:

Der Button mit der Klasse "btn btn-primary" ist der Auslöser für das Modal.
data-toggle="modal" teilt Bootstrap mit, dass es sich um ein Modal handelt.
data-target="#exampleModal" ist die ID des Modals, das geöffnet werden soll. Sie ist eindeutig für jedes Modal auf der Seite

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Modal öffnen
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 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-Überschrift</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">
        Hier ist der Inhalt des Modals.
      </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">Speichern</button>
      </div>
    </div>
  </div>
</div>

Bootstrap Modal

Links