Bootstrap 5 弹出框

Pop-up-vindue

Pop-up-vindue-komponenten ligner en værktøjslinje; det er et pop-up-vindue, der vises, når brugeren klikker på et element. Forskellen er, at pop-up-vinduet kan indeholde mere indhold.

Sådan oprettes et pop-up-vindue

For at oprette et pop-up-vindue, skal du data-bs-toggle="popover" til at tilføje til elementet.

Brug title Egenskaben definerer titlen på pop-up-vinduet og bruger data-bs-content Egenskaben definerer teksten, der vises i pop-up-vinduets tekst

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Pop-up-vinduesoverskrift" data-bs-content="Nogle indhold i pop-up-vinduet">Skift pop-up-vindue</button>

Bemærk:Pop-up-vinduer skal initialiseres med JavaScript for at fungere.

Følgende kode aktiverer alle pop-up-vinduer i dokumentet:

Eksempel

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

Prøv det selv

Placer pop-up-vinduet

Som standard vises pop-up-vinduet på elementets højre side.

Brug data-bs-placement Indstil placeringen af pop-up-vinduet i øverste, nederste, venstre eller højre kant af elementet:

Eksempel

<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">Bund</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Indhold">Venstre</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Indhold">Højre</a>

Prøv det selv

Bemærk:Hvis der ikke er nok plads, vil placement-egenskaben ikke fungere som forventet. For eksempel: Hvis du bruger top-placeringsegenskaben øverst på siden (uden reserveret plads), vil pop-up vinduet blive vist nedenfor eller til højre (hvor som helst der er plads).

Luk pop-up

Som standard lukkes pop-up vinduet, når du klikker på elementet igen. Men du kan bruge data-bs-trigger="focus" Egenskab, indstil denne egenskab, så pop-up vinduet lukkes, når du klikker uden for elementet:

Eksempel

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Klik på hvilken som helst placering i dokumentet for at lukke dette pop-up vindue">Klik mig</a>

Prøv det selv

Hover pop-up

Bemærk:Hvis du ønsker, at en pop-up vises, når musepilen bevæger sig over elementet, skal du bruge værdien "hover" af data-bs-trigger Egenskab:

Eksempel

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Pop-up tekst">Bliv ved med at holde musepilen over mig</a>

Prøv det selv