Popup ng Bootstrap 5

Pop-up

Ang komponente ng pop-up ay katulad ng tooltip; ito ay isang popup na lumilitaw kapag hinitang ng user ang elemento. Ang pagkakaiba nito ay ang pop-up ay maaaring magkaroon ng mas maraming nilalaman.

Kung paano gumawa ng pop-up

Para sa paglikha ng pop-up, ilagay ang data-bs-toggle="popover" Para sa pagdagdag ng attribute sa elemento.

Ginagamit ang title Ang attribute ay nagpapatibay ng teksto ng pamagat ng pop-up, at ginagamit ang data-bs-content Ang attribute ay nagpapatibay ng teksto na ipapakita sa laman ng pop-up:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Pop-up Title" data-bs-content="Ilang nilalaman sa pop-up">Toggle Pop-up</button>

Babala:Ang popup ay dapat na inilunsad ng JavaScript para magtrabaho.

Ang sumusunod na code ang magpapahabilitahin ang lahat ng popup sa dokumento:

Halimbawa

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

Subukan Ngayon

Para sa pag-locate ng popup

Sa normal na kaso, ang popup ay magpapakita sa kanang bahagi ng elemento.

Ginagamit ang data-bs-placement Ang pagtayo ng setting na popup sa itaas, ibaba, kaliwa o kanan ng elemento:

Halimbawa

<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="Content">Kaliwa</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Kaliwa</a>

Subukan Ngayon

Babala:Kung wala ng sapat na espasyo, ang atributo na placement ay hindi gagana ayon sa inyong inaasahan. Halimbawa: Kung gumagamit ka ng placement na top (walang nakahanda na espasyo), ito ay magiging sa ilalim o sa kanan ng elemento (sa anumang lugar na may espasyo).

Isara ang Pop up

Sa normal na kalagayan, ang pop up ay masusura kapag pinindutin ang elemento nang ikalawa. Subalit, maaaring gamitin ang data-bs-trigger="focus" Atributo, itatago ang pop up kapag pinindutin ang elemento mula sa labas ng elemento:

Halimbawa

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Pindutin anumang lugar sa dokumento upang isara ang pop up na ito">Pindutin Ako</a>

Subukan Ngayon

Pop up sa Paghanggang

Mga Payo:Kung gusto mong ipakita ang pop up kapag inililipat ang mouse pointer sa elemento, gamitin ang halaga ng "hover" ng data-bs-trigger Atributo:

Halimbawa

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Tekstong Popover">Maghanggang Apat sa Aking Itaas</a>

Subukan Ngayon