elemento di dialogo - finestra modale semplificata

Chrome Canary ha ottenuto il supporto per l'elemento finestra di dialogo dietro un flag. L'elemento dialog può essere utilizzato per i popup in una pagina web.

  • show(): apri la finestra di dialogo.
  • close(): chiudi la finestra di dialogo. Prende un argomento facoltativo sul quale, se presente, è impostato dialog.returnValue.
  • showModal(): apri la finestra di dialogo modale.
  • ::backdrop: pseudo-elemento per definire lo sfondo dietro una finestra di dialogo modale.
  • Evento close: attivato alla chiusura di una finestra di dialogo.

Aggiornamento del 16 dicembre 2013

L'elemento dialog ora supporta:

  • Evento cancel: viene attivato quando viene premuto il tasto Esc in una finestra di dialogo modale. Questo evento può essere annullato utilizzando event.preventDefault().
  • Attributo autofocus: il primo controllo modulo in una finestra di dialogo modale con l'attributo autofocus, se presente, verrà attivato quando la finestra di dialogo verrà mostrata. In assenza di un elemento di questo tipo, viene impostato lo stato attivo sul primo elemento attivabile.
  • form[method="dialog"]: valido solo all'interno di una finestra di dialogo. Dopo l'invio del modulo, chiude la finestra di dialogo e imposta dialog.returnValue sul valore del pulsante di invio utilizzato.

Dai un'occhiata ai dettagli con una demo dal vivo e il polyfill.

Attiva l'opzione "Attiva le funzionalità sperimentali della piattaforma web" all'indirizzo chrome://flags/.