Bootstrap 5 popup

Popup-fönster

Popup-fönster (Popover) komponenten liknar en verktygstips; det är ett popup-fönster som visas när användaren klickar på ett element. Skillnaden är att popup-fönstret kan innehålla mer innehåll.

Hur man skapar ett popup-fönster

För att skapa ett popup-fönster, sätt data-bs-toggle="popover" egenskapen till elementet.

Använd title Egenskapen definierar titeltexten för popup-fönstret och använder data-bs-content Egenskapen definierar texten som visas i popup-fönstrets innehåll:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popup-fönster rubrik" data-bs-content="Några innehåll i popup-fönstret">Växla popup-fönster</button>

Observera:Popup-fönster måste initialiseras med JavaScript för att fungera.

Följande kod aktiverar alla popup-fönster i dokumentet:

Exempel

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

Prova själv

Positionera popup-fönstret

Som standard kommer popup-fönstret att visas på elementets högra sida.

Använd data-bs-placement Ställ in positionen för popup-fönstret på toppen, botten, vänster eller höger för elementet:

Exempel

<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="Innehåll">Vänster</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Innehåll">Höger</a>

Prova själv

Observera:Om det inte finns tillräckligt med utrymme kommer placement-egenskapen inte att fungera som förväntat. Till exempel: om du använder top placement-egenskapen på sidans topp (utan reserverat utrymme) kommer popup-fönstret att visas under eller till höger om elementet (på vilket som helst ställe där det finns utrymme).

Stäng popup-fönstret

Som standard stängs popup-fönstret när du klickar på elementet igen. Men du kan använda data-bs-trigger="focus" Egenskap, genom att ställa in denna egenskap kan popup-fönstret stängas när du klickar utanför elementet:

Exempel

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Klicka på valfri plats i dokumentet för att stänga detta popup-fönster">Klicka här</a>

Prova själv

Hover-popuptext

Tips:Om du vill visa en popup-fönster när muspekaren flyttas över elementet, använd värde "hover" av data-bs-trigger Egenskap:

Exempel

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popuptext">Klicka här för att hålla muspekaren över</a>

Prova själv