Popover e finestra di dialogo

Un popover è un elemento con un attributo popover ed è utile per un'ampia gamma di pattern interattivi, tra cui descrizioni comando, avvisi, notifiche popup e altro ancora.

<div id="my-popover" popover>My popover content</div>

L'attributo popover nasconde l'elemento per impostazione predefinita e devi fornire agli utenti un modo per aprirlo. Sebbene i popup vengano posizionati nel livello superiore, sopra tutti gli altri contenuti, non sono modali. Ciò significa che puoi comunque interagire con i contenuti al di fuori del popup.

Controllare i popup

Prima di esplorare i diversi tipi di popup e il loro comportamento, vediamo come aprirli e chiuderli.

Dichiarativamente

I popup possono essere controllati interamente in HTML, senza la necessità di utilizzare JavaScript, utilizzando pulsanti (e input con il tipo button) e l'attributo popovertarget.

Il popup nello snippet di codice precedente ha un id di my-popover, che puoi utilizzare per fare riferimento al popup.

<button popovertarget="my-popover">Toggle</button>

Puoi anche specificare se un pulsante deve aprire o chiudere un popover utilizzando popovertargetaction="show" e popovertargetaction="hide".

Con JavaScript

Puoi anche controllare un popover utilizzando JavaScript, il che è utile quando vuoi mostrare un popover in risposta a un evento diverso dal clic di un pulsante da parte di un utente. Per farlo, devi recuperare l'elemento popup e poi chiamare showPopover(), hidePopover() o togglePopover().

Tipi di popup

Quando aggiungi un popover al tuo sito, ci sono molte interazioni da considerare. Come si apre? In che modo gli utenti possono ignorarlo? Che cosa succede agli altri popup aperti? Esistono tre tipi di popover e puoi scegliere quello che fornisce il comportamento e le interazioni richiesti dal tuo caso d'uso.

Popover automatici

I popup automatici hanno la maggior parte delle funzionalità integrate e sono l'impostazione predefinita se non specifichi un tipo.

<div id="popover" popover>My popover</div>

In molti casi, non è consigliabile avere più popup aperti contemporaneamente, quindi i popup automatici chiudono gli altri popup automatici quando vengono aperti. Supportano anche la chiusura rapida, il che significa che se fai clic all'esterno del popup, questo si chiude automaticamente. Può essere chiuso anche con il tasto Esc.

Popover manuali

Sebbene il comportamento di visualizzazione automatica copra molti casi d'uso, in alcuni casi potresti aver bisogno di un maggiore controllo sui popup. Con i popup manuali, hai molto più controllo e sei anche responsabile di gran parte del comportamento.

<div id="popover" popover="manual">My popover</div>

Questo popup si chiuderà solo quando lo chiuderai esplicitamente. Non può essere chiuso tramite chiusura leggera o il tasto Esc. ma ti consente di aprire più popup contemporaneamente.

Popover di suggerimento

Potresti anche voler utilizzare i popup per aggiungere descrizioni comando alla tua pagina. In questo pattern, vuoi poter passare il mouse sopra un elemento e visualizzare una descrizione. Solo una deve essere aperta alla volta. Se utilizzi i popup automatici, l'apertura di uno chiuderà tutti gli altri popup automatici aperti. Se utilizzi i popup manuali, devi implementare manualmente gran parte del comportamento, inclusa la chiusura degli altri popup. I popup dei suggerimenti forniscono una terza opzione con un comportamento simile a quello dei popup automatici. Tuttavia, l'apertura di un popup di suggerimento non chiude i popup automatici.

<div id="popover" popover="hint">My popover</div>

I popup dei suggerimenti sono utili per le informazioni supplementari secondarie rispetto ai contenuti principali. Spesso è consigliabile attivare i popup dei suggerimenti con eventi non basati su clic, come il passaggio del mouse o lo stato attivo.

Posizionamento del popup

Per impostazione predefinita, i popup si aprono al centro dello schermo. Vengono aggiunti al livello superiore, sopra tutti gli altri contenuti, e possono essere posizionati rispetto all'area visibile.

Questa soluzione non è sempre ideale, in quanto spesso vuoi posizionare il popover vicino all'elemento che lo attiva. Il posizionamento dell'ancora offre un modo per farlo.

Il posizionamento dell'ancoraggio prevede due passaggi: la definizione dell'elemento di ancoraggio e il posizionamento dell'elemento rispetto all'ancoraggio. I popup possono gestire il primo passaggio impostando un ancoraggio implicito. Quando apri un popover utilizzando <button popovertarget>, il pulsante è l'ancoraggio implicito. Se apri un popover utilizzando JavaScript, puoi impostare l'ancoraggio implicito con l'opzione source.

Per impostazione predefinita, un popover è centrato utilizzando margin: auto. Per utilizzare il posizionamento dell'ancora, probabilmente dovrai eseguire l'override impostando margin: unset.

Stili e animazioni

Lo pseudo elemento ::backdrop

I popup si aprono in un livello superiore, sopra tutti gli altri contenuti della pagina. Sotto il popover è presente uno ::backdrop pseudo elemento a cui è possibile applicare uno stile.

È importante notare che i contenuti al di fuori di un popover non sono inerti: puoi comunque fare clic sui pulsanti e utilizzare la tastiera per navigare nella pagina. Non devi oscurare i contenuti della pagina, ad esempio applicando un effetto sfocatura intenso o impostando lo sfondo su un colore opaco.

La pseudo-classe :popover-open

Supponiamo che tu voglia disporre i contenuti del popup utilizzando le griglie CSS. Aggiungi [popover]{ display: grid } e improvvisamente tutti i popup diventano visibili. Questo avviene perché i popup vengono nascosti utilizzando display: none. Puoi utilizzare la pseudo classe :popover-open per applicare gli stili solo quando il popup è aperto.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open è utile anche quando animi un popover.

Animare i popup

L'animazione di un popover prevede tre passaggi:

1. @starting-style {popover:popover-open { } }: gli stili iniziali del popover non appena è visibile. Tieni presente che questa opzione deve essere definita nel foglio di stile dopo il punto 2.
2. popover:popover-open { }: gli stili del popover quando è aperto.
3. popover { }: gli stili a cui passa il popover quando si chiude.

Un popup viene nascosto utilizzando display: none quando non è aperto. Per animare questo elemento, devi impostare transition-behavior: allow-discrete e aggiungere display all'elenco delle proprietà in transition.

Se posizioni il popover con un ancoraggio implicito, devi aggiungere anche overlay all'elenco delle proprietà in transition. La relazione di ancoraggio implicita viene rimossa una volta che il popover viene rimosso dal livello superiore, quindi l'aggiunta di una transizione alla proprietà overlay la ritarda fino al completamento della transizione di uscita.

Interazioni tra i popup

Probabilmente avrai più popup in una pagina e il modo in cui interagiscono dipende dal loro tipo e da come vengono utilizzati.

Popover nidificati

In alcuni casi, potrebbe essere necessario aprire un popover dall'interno di un altro popover. Ad esempio, potresti avere un menu popup e una delle voci di menu apre un sottomenu. Quando l'utente chiude il menu principale, non vuoi che il sottomenu rimanga aperto. I popup possono aiutarti a gestirlo automaticamente.

Se apri un popup di suggerimento da un altro popup di suggerimento o un popup automatico da un altro popup automatico, i popup vengono impilati. Se chiudi un popover, vengono chiusi anche tutti i popover successivi nello stack. Questa operazione funziona anche con la chiusura leggera: se fai clic su un popover, tutti i popover successivi nella pila si chiuderanno, ma quelli precedenti rimarranno aperti.

Un popover viene aggiunto allo stack se il relativo elemento di origine si trova all'interno di un popover. L'elemento di origine viene impostato automaticamente quando utilizzi popovertarget su un pulsante o con JavaScript impostando l'opzione source quando chiami .showPopover({source}) o .togglePopover({source}).

Esiste uno stack per i popup automatici e uno stack separato per i popup dei suggerimenti. Tuttavia, se apri un popup di suggerimento dall'interno di un popup automatico, questo viene aggiunto allo stack automatico.

Ricorda che i popup dei suggerimenti sono pensati per informazioni più semplici e temporanee, quindi non puoi attivare un popup automatico da un popup dei suggerimenti.

Se utilizzi i popup manuali, devi gestire tutto manualmente.

Chiusura di altri tipi di popup

Hai imparato che l'apertura di un popup automatico chiude gli altri popup automatici, ma come interagiscono i diversi tipi? Esploriamo questo aspetto con un esempio di pagina che utilizza tutti e tre i tipi. È presente un menu di navigazione con pulsanti che utilizzano i popup automatici per aprirsi e chiudersi. Nella pagina è presente del testo che utilizza i popup di suggerimento per mostrare descrizioni comando contestuali. Infine, viene visualizzato un messaggio popup manuale per informare l'utente che un'attività in background è stata completata.

Le descrizioni comando sono effimere e vengono visualizzate quando passiamo il mouse sopra il testo. Prevediamo che sia visibile un solo suggerimento alla volta e che l'attivazione di un secondo popup di suggerimento chiuda il primo.

Quando apri il menu facendo clic su un pulsante, il suggerimento si chiude per due motivi. Innanzitutto, il clic al di fuori del suggerimento attiva una chiusura leggera. In secondo luogo, l'apertura di un popup automatico chiude tutti i popup di suggerimento aperti. Questo perché l'utente ha cambiato il suo focus e i contenuti effimeri in un popup di suggerimento non sono più pertinenti. Ciò significa che se chiami showPopover() su un popup automatico, qualsiasi popup di suggerimento aperto verrà chiuso.

I menu a discesa sono popup automatici. Con i menu a discesa, ti aspetti che ne sia aperto uno solo alla volta e che l'apertura di uno chiuda l'altro. Come hai visto, l'apertura di un popup automatico chiude anche tutti i popup di suggerimento aperti.

Tuttavia, mentre un menu a discesa è aperto, potresti comunque voler visualizzare il contenuto di una descrizione comando non correlata. La visualizzazione di una descrizione comando di suggerimento non chiude i popup automatici.

Il popup manuale non è influenzato dai popup automatici o dei suggerimenti e, quando si apre, non chiude alcun popup automatico o dei suggerimenti. Tuttavia, se apri un popover manuale facendo clic su un pulsante, questo attiva la chiusura leggera dei suggerimenti e dei popover automatici.

Le interazioni tra i tipi di popover possono sembrare complesse, ma consentono pattern di utilizzo comuni se utilizzi i tipi nelle situazioni corrette. Se i popup non interagiscono come previsto, rivedi i tipi che stai utilizzando.

Verifica la tua comprensione