Bootstrap 5 Pop-up

Pop-up弹出框

Il componente Pop-up弹出框 è simile a un tooltip; è una finestra弹出框 che appare quando l'utente clicca su un elemento. La differenza sta nel fatto che il pop-up弹出框 può contenere più contenuti.

Come creare un pop-up弹出框

Per creare un pop-up弹出框， inserire data-bs-toggle="popover" per aggiungere l'attributo all'elemento.

Utilizzare title L'attributo specifica il testo del titolo del pop-up弹出框 e utilizza data-bs-content L'attributo specifica il testo visualizzato nel corpo del pop-up弹出框：

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Titolo del pop-up弹出框" data-bs-content=" Alcuni contenuti del pop-up弹出框">Attivare il pop-up弹出框</button>

Attenzione:I pop-up弹出框 devono essere inizializzati con JavaScript per funzionare.

Il seguente codice abilita tutti i pop-up弹出框 nel documento：

Esempio

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

Prova personalmente

Posizionare la finestra弹出框

Per impostazione predefinita，la finestra弹出框会出现在元素的右侧。

Utilizzare data-bs-placement Impostazione della posizione della finestra弹出框弹出框在元素顶部、底部、左侧或右侧：

Esempio

<a href="#" title="Intestazione" data-bs-toggle="popover" data-bs-placement="top" data-content="Contenuto">Alto</a>
<a href="#" title="Intestazione" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Contenuto">Basso</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Contenuto">Sinistra</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Contenuto">Destra</a>

Prova personalmente

Attenzione:Se non c'è abbastanza spazio, la proprietà placement non funzionerà come previsto. Ad esempio: se usi l'attributo placement top nella parte superiore della pagina (senza spazio riservato), la finestra popup verrà visualizzata sotto o a destra dell'elemento (qualsiasi spazio disponibile).

Chiudi il popup

Per impostazione predefinita, facendo clic nuovamente sull'elemento la finestra popup verrà chiusa. Tuttavia, puoi usare data-bs-trigger="focus" Proprietà, impostando questa proprietà puoi chiudere la finestra popup facendo clic all'esterno dell'elemento:

Esempio

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Fai clic su qualsiasi posizione del documento per chiudere questa finestra popup">Fai clic su me</a>

Prova personalmente

Popup hover

Suggerimento:Se desideri visualizzare la finestra popup quando il puntatore del mouse si muove sull'elemento, utilizza il valore "hover" del data-bs-trigger Proprietà:

Esempio

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Testo del popup">Passa il mouse sopra me</a>

Prova personalmente