Page 48 - Guida tascabile HTML5

Figura 3.4 L’effetto del tag <details>, prima senza e poi con l’attributo open.

ATTENZIONE Al momento attuale il tag <details> non è supportato in modo nativo dal
browser Internet Explorer.

Finestre modali con <dialog>
Un altro tipo di interfaccia a cui ci ha abituato il web design moderno è la

cosiddetta finestra modale, ovvero un contenuto sovrapposto a quello standard

della pagina, che attira la nostra attenzione e spesso richiede un’interazione
dell’utente per scomparire lasciando spazio al contenuto principale.

Può essere utilizzato per visualizzare in primo piano un avviso particolare, per

porre l’accento su una galleria fotografica, per richiedere l’iscrizione a una
newsletter, per mostrare un’inserzione pubblicitaria.

Questo tag prevede l’utilizzo dell’attributo open con la sintassi <dialog open> per

determinarne la visibilità: intervenendo con uno script JavaScript adeguato sarà
possibile decidere quando mostrare o nascondere il contenuto.

Ecco di seguito un semplice esempio di markup che mostra il contenuto del tag

<dialog> sovrapposto a un normale paragrafo. Come vedete il box è indipendente
rispetto al contenuto sottostante. Se non fosse dichiarato l’attributo open, la finestra

modale non sarebbe visibile nella pagina:

<main>
<dialog open>
<p>Il tag dialog non interferisce con il flusso del documento, ma si sovrappone
al contenuto della pagina visualizzata</p>
</dialog>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing [...]</p>
</main>