Bootstrap 5 ponnahdusikkunat

Pop-up-ikkuna

Pop-up-ikkuna (Popover) -komponentti muistuttaa työkaluvihkaa; se on pop-up-ikkuna, joka näkyy, kun käyttäjä napsauttaa elementtiä. Ero on siinä, että pop-up-ikkunassa voi olla enemmän sisältöä.

Kuinka luoda pop-up-ikkuna

Luo pop-up-ikkuna, lisää data-bs-toggle="popover" ominaisuutta elementtiin.

Käytä title Ominaisuus määrittää pop-up-ikkunan otsikkotekstin ja käyttää data-bs-content Ominaisuus määrittää tekstin, joka näkyy pop-up-ikkunan sisällä:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Pop-up-ikkunan otsikko" data-bs-content="Pop-up-ikkunassa olevaa sisältöä">Vaihda pop-up-ikkuna</button>

Huomioitavaa:Pop-up-ikkunat on初始化 JavaScriptilla toimiakseen.

Seuraava koodi ottaa kaikkien pop-up-ikkunoiden käyttöön dokumentissa:

Esimerkki

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

Kokeile itse

Sijaitse pop-up-ikkuna

Oletusarvoisesti, pop-up-ikkuna näkyy elementin oikealla puolella.

Käytä data-bs-placement Aseta ominaisuudet, jotta pop-up-ikkuna näkyy elementin ylä-, alareuna-, vasen- tai oikealla puolella:

Esimerkki

<a href="#" title="Otsikko" data-bs-toggle="popover" data-bs-placement="top" data-content="Sisältö">Ylös</a>
<a href="#" title="Otsikko" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Sisältö">Alas</a>
<a href="#" title="Otsikko" data-bs-toggle="popover" data-bs-placement="left" data-content="Sisältö">Vasen</a>
<a href="#" title="Otsikko" data-bs-toggle="popover" data-bs-placement="right" data-content="Sisältö">Oikea</a>

Kokeile itse

Huomioitavaa:Jos tilaa ei ole riittävästi, placement-ominaisuus ei toimi odotetusti. Esimerkiksi: Jos käytät sivun ylätä (ei varattua tilaa) top placement -ominaisuutta, se näyttää ponnahdusikkunan elementin alapuolella tai oikealla (jossa tahansa on tilaa).

Sulje ponnahdusikkuna

Oletusarvoisesti ponnahdusikkuna suljetaan, kun elementtiä napsautetaan uudelleen. Voit kuitenkin käyttää data-bs-trigger="focus" Ominaisuus, aseta tämä ominaisuus, jotta ponnahdusikkuna suljetaan klikkaamalla elementin ulkopuolelta:

Esimerkki

<a href="#" title="Poistettava ponnahdusikkuna" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Napsauta mihin tahansa asiakirjan kohtaan, jotta ponnahdusikkuna suljetaan">Napsauta minua</a>

Kokeile itse

Hiiren osoitin

Vinkki:Jos haluat näyttää ponnahdusikkunan, kun hiiren osoitin siirtyy elementin päälle, käytä arvoa "hover" 。 data-bs-trigger Ominaisuus:

Esimerkki

<a href="#" title="Otsikko" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Ponnahdusikkunatexti">Käytä hiiren osoittimella yllä olevaa</a>

Kokeile itse