Bootstrap 5-Popup

Pop-up-Fenster

Das Pop-up-Fenster (Popover)-Komponente ähnelt dem Tooltip; es ist ein Pop-up-Fenster, das beim Klicken auf ein Element appears. Der Unterschied besteht darin, dass das Pop-up-Fenster mehr Inhalte enthalten kann.

Wie man ein Pop-up-Fenster erstellt

Um ein Pop-up-Fenster zu erstellen, fügen Sie data-bs-toggle="popover" Das Attribut wird dem Element hinzugefügt.

Verwenden Sie title Das Attribut legt den Titeltext des Pop-up-Fensters fest und verwendet data-bs-content Das Attribut legt den Text fest, der im Textkörper des Pop-up-Fensters angezeigt wird:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Pop-up-Fenster-Titel" data-bs-content="Einige Inhalte im Pop-up-Fenster">Pop-up-Fenster umschalten</button>

Hinweis:Pop-up-Fenster müssen mit JavaScript initialisiert werden, um zu funktionieren.

Das folgende Code aktiviert alle Pop-up-Fenster im Dokument:

Beispiel

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Versuchen Sie es selbst

Position des Pop-up-Fensters bestimmen

Standardmäßig erscheint das Pop-up-Fenster auf der rechten Seite des Elements.

Verwenden Sie data-bs-placement Position des Pop-up-Fensters einstellen: Oben, unten, links oder rechts relative zum Element:

Beispiel

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Inhalt">Links</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Inhalt">Rechts</a>

Versuchen Sie es selbst

Hinweis:Wenn nicht genügend Platz vorhanden ist, funktioniert die placement-Eigenschaft möglicherweise nicht wie erwartet. Zum Beispiel: Wenn Sie das top Placement-Attribut in der oberen Seite der Seite (ohne reservierten Raum) verwenden, wird das Pop-up-Fenster stattdessen unterhalb oder rechts vom Element (jeder Ort mit Platz) angezeigt.

Pop-up-Fenster schließen

Standardmäßig wird das Pop-up-Fenster durch erneutes Klicken auf das Element geschlossen. Sie können jedoch data-bs-trigger="focus" Eigenschaft, um das Pop-up-Fenster durch Klicken außerhalb des Elements zu schließen zu konfigurieren:

Beispiel

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Klicken Sie auf irgendeinen Ort im Dokument, um dieses Pop-up-Fenster zu schließen">Klicken Sie mich</a>

Versuchen Sie es selbst

Hover-Pop-up

Hinweis:Wenn Sie möchten, dass ein Pop-up-Fenster angezeigt wird, wenn der Mauszeiger auf das Element bewegt wird, verwenden Sie den Wert "hover" von data-bs-trigger Eigenschaft:

Beispiel

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Pop-up-Text">Bewegen Sie den Mauszeiger darauf</a>

Versuchen Sie es selbst