Bootstrap 5-Modal

Modales

Das Modal-Element ist ein Dialog-/Popup-Fenster, das oben auf der aktuellen Seite angezeigt wird:

Wie erstellt man eine Modale

Nachfolgendes Beispiel zeigt, wie man eine grundlegende Modale erstellt:

Beispiel

<!-- Schaltfläche zum Öffnen der Modale -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Modale öffnen
</button>
<!-- Modale -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modaltitel -->
      <div class="modal-header">
        <h4 class="modal-title">Modaltitel</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Modalkörper -->
      <div class="modal-body">
        Modalkörper ..
      </div>
      <!-- Modalseitenfuß -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

Versuchen Sie es selbst

um Animationen hinzuzufügen

Bitte verwenden Sie .fade Fügen Sie die Klasse hinzu, um ein Ein- und Ausblenden bei der Öffnung und Schließung der Modale hinzuzufügen:

Beispiel

<!-- Ausblenden Modale -->
<div class="modal fade"></div>
<!-- Modale ohne Animation -->
<div class="modal"></div>

Versuchen Sie es selbst

Modalsgröße

Durch Hinzufügen für eine kleine Modale .modal-sm Klasse (max-width 300px) hinzu, um eine große Modale hinzuzufügen .modal-lg Klasse (max-width 800px) oder fügen Sie für eine extra große Modale hinzu .modal-xl um die Größe der Modale zu ändern (max-width 1140 Pixel). Standardmäßig beträgt die maximale Breite 500 Pixel.

Bitte fügen Sie .modal-dialog Fügen Sie zusammen mit der Klasse und der Größenklasse hinzu <div> Element:

Kleine Modale

<div class="modal-dialog modal-sm">

Versuchen Sie es selbst

Große Modale

<div class="modal-dialog modal-lg">

Versuchen Sie es selbst

Extra Large Modal

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

Versuchen Sie es selbst

Standardmäßig beträgt die Größe des Modals "medium" (maximale Breite 500px).

vollbildiges Modal

Verwenden Sie .modal-fullscreen Klasse:

Beispiel

<div class="modal-dialog modal-fullscreen">

Versuchen Sie es selbst

responsives vollbildiges Modal

Sie können auch .modal-fullscreen-*-* Klasse steuert, wann das Modal vollbildlich angezeigt werden sollte:

Klasse Beschreibung Beispiel
.modal-fullscreen-sm-down Unter 576px vollbildlich Versuchen Sie es selbst
.modal-fullscreen-md-down Unter 768px vollbildlich Versuchen Sie es selbst
.modal-fullscreen-lg-down Unter 992px vollbildlich Versuchen Sie es selbst
.modal-fullscreen-xl-down Unter 1200px vollbildlich Versuchen Sie es selbst
.modal-fullscreen-xxl-down Unter 1400px vollbildlich Versuchen Sie es selbst

zentrierte Modal

Durch die Verwendung von .modal-dialog-centric Klasse, um das Modal innerhalb der Seite vertikal und horizontal zentral auszurichten:

Beispiel

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

Versuchen Sie es selbst

Scrollbare Modal

Wenn im Modal viel Inhalt vorhanden ist, wird eine Scrollleiste zur Seite hinzugefügt. Sehen Sie sich das folgende Beispiel an, um zu verstehen:

Beispiel

<div class="modal-dialog">

Versuchen Sie es selbst

Aber, indem man .modal-dialog-scrollable Hinzufügen zu .modal-dialog Es kann nur innerhalb des Modals gescrollt werden, nicht jedoch innerhalb der Seite selbst:

Beispiel

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

Versuchen Sie es selbst