`<dialog>`: elemento de diálogo

<dialog>: elemento de diálogo

• Nativo: o elemento <dialog> representa elementos interativos como caixas de diálogo modais ou não modais, alertas, inspetores e subjanelas. Está disponível na maioria dos navegadores desde março de 2022.

Atributos

• open: indica que a caixa de diálogo está ativa e pode ser interagida. Se o atributo open não estiver definido, ela não ficará visível para o usuário. Recomenda-se usar os métodos .show() ou .showModal().

Notas de uso

• O elemento HTML <form> pode fechar a caixa de diálogo usando o atributo method="dialog".
• É possível estilizar o plano de fundo de uma caixa de diálogo modal usando o pseudo-elemento CSS ::backdrop.
• O atributo autofocus deve ser adicionado ao elemento com o qual se deve interagir imediatamente quando a caixa de diálogo for aberta.
• Deve-se tomar cuidado para não adicionar o atributo tabindex ao elemento <dialog>.

Acessibilidade

• Ao implementar uma caixa de diálogo, é importante definir corretamente o foco do usuário.
• Ao abrir uma caixa de diálogo com o método showModal(), o foco é definido no primeiro elemento focalizável.
• A forma mais segura de garantir que todos os usuários possam fechar a caixa de diálogo é incluir um botão explícito para isso.

Exemplos

Caixa de diálogo apenas com HTML

• Exemplo de criação de uma caixa de diálogo não modal apenas com HTML. Devido ao atributo open, a caixa de diálogo fica aberta quando a página é carregada.

Criando uma caixa de diálogo modal

• Exemplo de abertura de uma caixa de diálogo modal usando o método .showModal(). Ela pode ser fechada com a tecla Esc ou com o botão "Close" dentro da caixa de diálogo.

Tratando o valor de retorno da caixa de diálogo

• Exemplo de uso de returnValue do elemento <dialog>. A caixa de diálogo modal pode ser fechada usando um formulário.

Fechando uma caixa de diálogo com entrada obrigatória no formulário

• Quando o formulário dentro da caixa de diálogo tiver um campo obrigatório, é possível fechá-la usando o atributo formnovalidate.

Animação de caixa de diálogo

• É possível animar a caixa de diálogo animando a propriedade display do elemento <dialog>.

Resumo técnico

• Categoria de conteúdo: conteúdo de fluxo, raiz de seção
• Conteúdo permitido: conteúdo de fluxo
• Função ARIA implícita: dialog
• Interface DOM: HTMLDialogElement

Especificação

• Padrão HTML # the-dialog-element

Compatibilidade com navegadores

• O elemento <dialog> e o atributo open têm suporte completo na maioria dos principais navegadores.

Consulte também

• Interface HTMLDialogElement
• Eventos close e cancel de HTMLDialogElement
• Atributo open de HTMLDialogElement
• Atributo global inert de elementos HTML
• Pseudo-elemento CSS ::backdrop