Modal

Modals sind schlanke aber flexible Dialog-Fenster.

Ein Bootstrap Modal ist ein modales Dialogfenster (Popup), das sich über den eigentlichen Inhalt der Webseite legt. 
Es wird häufig verwendet, um zusätzliche Informationen, Formulare oder Medien anzuzeigen, ohne dass der Nutzer die aktuelle Seite verlassen muss. 

Funktionsweise

Trigger: 
Das Modal wird durch eine Benutzeraktion ausgelöst, meist durch den Klick auf einen Button oder Link.
Die Überschrift fungiert als Klick-Ziel. Die Wahl zwischen <a> und <button> ist entscheidend für das Design: 
Ein Link integriert sich fließend in Fließtext, während ein Button (z.B. .btn-primary) als klarer Call-to-Action dient. 

Überlagerung (Backdrop): 
Beim Öffnen erscheint eine dunkle, halbtransparente Schicht über der Webseite, die den Fokus vollständig auf das Fenster lenkt.
Technisch wird hier das Attribut data-bs-toggle="modal" und data-bs-target="#modal-{data.uid}" gesetzt. 

Schließen: 
Der Nutzer kann das Modal über ein "X" im Header, einen Schließen-Button im Footer, die Escape-Taste oder durch einen Klick auf den Backdrop beenden.

Zuerst muss ein Modal-Behälter (Container-Element) im Backend erstellt werden.

In diesen Behälter können dann beliebig viele Content Elemente eingebunden werden!