Creazione di finestre di dialogo HTML5 native

La finestra di dialogo è uno degli elementi più comunemente utilizzati nella progettazione dell'interfaccia utente di un sito Web. Viene utilizzato per molteplici scopi, tra cui la visualizzazione di notifiche, il trasporto di un modulo di iscrizione, l'avviso di errori/avvisi e l'attenzione del visitatore su informazioni vitali. Quando le finestre di dialogo sono progettate in modo efficace e utilizzate correttamente, possono facilitare il compito dell'utente.

In precedenza, la creazione di una finestra di dialogo richiedeva l'utilizzo di un plug-in jQuery come Pop Easy, jQuery UI Dialog o Twitter Bootstrap Modal. Ma ora con l'introduzione del nuovo elemento <dialog> di HTML5, è diventato molto più facile per gli sviluppatori creare finestre di dialogo popup e modali su una pagina web.

Inizialmente, il tag <dialog> è entrato nelle specifiche HTML5 come un'ottima soluzione per il markup delle conversazioni, ma è stato eliminato dalle specifiche HTML5 nel 2009. Tuttavia, è tornato di nuovo in una nuova forma.

In questo post, ti guiderò attraverso l'elemento <dialog> e ti mostrerò come sfruttarlo al meglio. Cominciamo!

Se vuoi vedere l'elemento <dialog> in azione o giocare con il codice, guarda la demo dal vivo qui.

Supporto del browser per l'elemento <dialog>

Sfortunatamente, il supporto del browser per <dialog> è limitato per ora. L'elemento è attualmente supportato solo in Safari 6.0 e Chrome Canary. Anche se Chrome Canary supporta completamente il tag, devi abilitare un flag per usarlo. Vai su chrome://flags e abilita il flag "Abilita funzionalità sperimentali della piattaforma Web" .

Dopo aver abilitato il flag, è necessario riavviare il browser affinché le modifiche abbiano effetto.

L'interfaccia HTMLDialogElement

L'interfaccia HTMLDialogElement , che è inclusa nelle specifiche HTML per l'elemento <dialog> , ha numerose proprietà e metodi che puoi usare per far apparire e scomparire i tuoi dialoghi. Sono i seguenti:

Metodi:

L'interfaccia HTMLDialogElement ha tre metodi per aprire e chiudere le finestre di dialogo.

• show() : questo metodo viene utilizzato per mostrare una finestra di dialogo. Gli utenti possono comunque accedere ad altri contenuti del documento HTML finché è aperta una finestra di dialogo.
• showModal() : utilizzato per avviare una "finestra di dialogo modale" , che impedisce a un utente di accedere a qualsiasi cosa tranne la finestra di dialogo su una pagina Web.
• close() : Usato per chiudere una finestra di dialogo. Puoi passare returnValue come parametro facoltativo che aggiornerà la proprietà returnValue .

Proprietà:

Ci sono due proprietà incluse nell'interfaccia HTMLDialogElement .

• returnValue : recupera il parametro che è stato facoltativamente passato in close() .
• open : questa proprietà è un valore booleano. Se true , la finestra di dialogo sarà visibile all'utente. Altrimenti, sarà nascosto.

Eventi:

Quando una finestra di dialogo viene chiusa, verrà generato un evento di close .

 dialog.addEventListener('chiudi', funzione() {
Altro codice andrà qui...
});

Oltre a questi metodi e proprietà chiave, l'elemento <dialog> supporta anche:

• form[method="dialog"] : utilizzato per integrare un modulo con un <dialog> . Valido solo all'interno di una finestra di dialogo.
• autofocus attribute : utilizzato per mettere a fuoco un controllo modulo all'interno di una finestra di dialogo.
• cancel event : viene generato un evento di cancel quando una finestra di dialogo modale viene chiusa tramite "Esc"

Ora, dopo aver compreso le basi dell'elemento <dialog> , diventiamo pratici con alcuni esempi.

Creazione di un dialogo

Per prima cosa ti mostrerò come creare una semplice finestra di dialogo. Il codice riportato di seguito definisce un semplice elemento <dialog> con del contenuto, un pulsante di chiusura per nascondere la finestra di dialogo e un pulsante mostra per avviare la finestra di dialogo.

Benvenuto in Responsive Junction!
Fai in modo che il tuo sito esistente reagisca
Uscita

Mostra finestra di dialogo

Quando provi il codice sopra nel tuo browser, non vedrai nient'altro che il pulsante "Mostra finestra di dialogo" senza alcuna funzionalità, come mostrato nello screenshot riportato di seguito:

Per aprire e chiudere l'elemento <dialog> , è necessario utilizzare JavaScript .show( .show() e .close() .

 (funzione() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = funzione() {  
dialog.show();  
};  
document.getElementById('closeDialog').onclick = funzione() {  
dialog.close();  
};
})();

Ora se fai clic sul pulsante "Mostra finestra di dialogo" , puoi vedere la finestra di dialogo nel browser. Facendo clic su "Esci" si chiuderà la finestra di dialogo. Ecco lo screenshot:

Aggiunta di stile alla finestra di dialogo

Puoi aggiungere stili CSS alla tua finestra di dialogo proprio come faresti con qualsiasi altro elemento. Per impostazione predefinita, la finestra di dialogo verrà visualizzata orizzontalmente centrata mentre si sovrappongono altri elementi. Se sei a tuo agio con la posizione e l'aspetto predefiniti, non sono richiesti ulteriori CSS. Altrimenti puoi aggiungere il tuo CSS per adattarlo e progettare la finestra di dialogo secondo i tuoi gusti, come ho fatto di seguito:

 dialogo {
superiore: 28%;
larghezza: 400px;  
bordo: 1px solido rgba(0, 0, 0, 0.3);
raggio di confine: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
bordo superiore: 5px solido #eb9816;
}
pulsante{
display: blocco in linea;
raggio di confine: 3px;
confine: nessuno;
dimensione del carattere: 0,9 rem;
imbottitura: 0,4 rem 0,8 em;
sfondo: #eb9816;
bordo inferiore: 1px solido #f1b75c;
colore bianco;
font-weight: grassetto;
margine: 0 0,25rem;
allineamento testo: centro;
}
pulsante: passaggio del mouse, pulsante: messa a fuoco {
opacità: 0,92;
cursore: puntatore;
}

Creazione di una finestra modale

Se vuoi impedire ai tuoi utenti di accedere al contenuto del tuo HTML, puoi utilizzare le finestre di dialogo modali. Poiché la finestra di dialogo modale disattiva tutte le altre cose oltre alla visualizzazione della finestra di dialogo, gli utenti non saranno in grado di selezionare il testo in grigio o di fare clic per selezionare i pulsanti mentre la finestra di dialogo è aperta.

La creazione di modali è simile alla creazione di finestre di dialogo, con l'unica differenza di utilizzare .showModal() invece di .show() . Non è necessario apportare modifiche al codice HTML.

(funzione() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = funzione() {  
dialogo. showModale(); 
};  
document.getElementById('closeDialog').onclick = funzione() {  
dialog.close();  
};
})();

Mentre le finestre di dialogo predefinite sono visualizzate centrate orizzontalmente, le finestre di dialogo modali sono visualizzate sia verticalmente che orizzontalmente nella finestra. Inoltre, puoi chiudere una finestra modale premendo il tasto "Esc" .

Aggiunta del colore di sfondo della finestra di dialogo modale

L'elemento <dialog> presenta uno pseudo-elemento chiamato "::backdrop" , che funziona solo con i dialoghi modali. Utilizzando questo elemento, puoi oscurare la pagina principale per comunicare agli utenti che non è accessibile. Puoi posizionare e modellare uno sfondo sfruttando le proprietà CSS standard:

 finestra di dialogo::sfondo{
posizione: fissa;
superiore: 0;
a sinistra: 0;
a destra: 0;
in basso: 0;
colore di sfondo: rgba(0, 0, 0, 0.7);
}

Implementazione di <dialog> con un modulo

Un form può essere integrato con un elemento <dialog> usando il form method="dialog" . Dopo l'invio del modulo, la finestra di dialogo si chiude e restituisce il valore del pulsante di invio tramite la proprietà dialog.returnValue .

Ecco il codice HTML per la finestra di dialogo del modulo:

Sei d'accordo con i termini di utilizzo?
Inserisci qui il tuo testo!

sì
No


Finestra di dialogo Apri modulo

Utilizzare il seguente JavaScript per la finestra di dialogo del modulo.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = funzione() {  
formDialog.showModal();  
};
document.getElementById('submit').onclick = funzione() {
formDialog.close(valore);
};
document.getElementById('formDialog').addEventListener('close', function() {
avviso(formDialog.returnValue);
});

Nota : per una migliore comprensione, sto usando formDialog al posto di Dialog nella mia demo.

Se vuoi vedere l'elemento <dialog> in azione o giocare con il codice, guarda la demo dal vivo qui.

Conclusione

Con la reincarnazione dell'elemento <dialog> , è diventato molto più facile per gli sviluppatori creare finestre di dialogo senza utilizzare un plug-in jQuery. Anche se Chrome Canary e Safari 6.0 interpretano correttamente l'elemento <dialog> , è disponibile un polyfill per assicurarsi che altri browser supportino l'elemento.

Se desideri conoscere altre proprietà HTML5, potresti voler dare un'occhiata a Come usare Grips con l'API del file HTML5, oppure potresti voler conoscere l'attributo del menu contestuale HTML5.