elemento de caixa de diálogo - modais facilitados

Eiji Kitamura
Eiji Kitamura

O Chrome Canary tem suporte ao elemento de caixa de diálogo atrás de uma flag. O elemento dialog pode ser usado para pop-ups em uma página da Web.

  • show(): abrir a caixa de diálogo.
  • close(): fechar a caixa de diálogo. Utiliza um argumento opcional que, se presente, será definido como dialog.returnValue.
  • showModal(): abrir a caixa de diálogo modal.
  • ::backdrop: pseudoelemento para definir o estilo do plano de fundo atrás de uma caixa de diálogo modal.
  • Evento close: disparado quando uma caixa de diálogo é fechada.

Atualização em 16 de dezembro de 2013

O elemento dialog agora é compatível com:

  • Evento cancel: disparado quando a tecla Esc é pressionada em uma caixa de diálogo modal. Este evento pode ser cancelado usando event.preventDefault().
  • Atributo autofocus: o primeiro controle de formulário em uma caixa de diálogo modal que tem o atributo autofocus, se houver, será focado quando a caixa de diálogo for exibida. Se não houver um elemento desse tipo, o primeiro será focado.
  • form[method="dialog"]: válido somente dentro de uma caixa de diálogo. Após o envio do formulário, ele fecha a caixa de diálogo e define dialog.returnValue como o valor do botão de envio usado.

Confira os detalhes com uma demonstração ao vivo e o polyfill.

Ative a opção "Ativar recursos experimentais da plataforma da Web" em chrome://flags/.