O elemento de caixa de diálogo é útil para representar qualquer tipo de caixa de diálogo em HTML. Descubra como ele funciona.
Uma caixa de diálogo modal é um tipo especial de caixa pop-up em uma página da Web: um pop-up que interrompe o usuário para se concentrar nele. Há alguns casos de uso válidos para exibir uma caixa de diálogo, mas é preciso considerar muito bem antes de fazer isso. As caixas de diálogo modais forçam os usuários a se concentrar em conteúdo específico e, pelo menos temporariamente, ignoram o restante da página.
As caixas de diálogo podem ser modais (apenas o conteúdo na caixa de diálogo pode ser interagido) ou não modais (ainda é possível interagir com o conteúdo fora da caixa de diálogo). As caixas de diálogo modais aparecem sobre o restante do conteúdo da página. O restante da página é inerte e, por padrão, obscurecido por um plano de fundo semitransparente.
O elemento HTML semântico <dialog> para criar uma caixa de diálogo
vem com semântica, interações de teclado e todas as propriedades e métodos da interface HTMLDialogElement.
Caixas de diálogo modal
Confira um exemplo de <dialog> modal. Abra a caixa de diálogo com o botão "Abrir caixa de diálogo modal". Depois de aberta, há três maneiras de fechar a caixa de diálogo: a tecla de escape, o envio de um formulário com
um botão que tenha o formmethod="dialog"
definido (ou se o formulário tiver method="dialog" definido) e o método HTMLDialogElement.close().
O HTMLDialogElement tem três métodos principais, além de todos os métodos herdados de HTMLElement.
dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */
Como essa <dialog> foi aberta pelo método
HTMLDialogElement.showModal(), ela é uma caixa de diálogo modal. Abrir uma caixa de diálogo modal desativa e oculta tudo, exceto a própria caixa de diálogo. Se você passar o cursor sobre a interface fora da caixa de diálogo, vai notar que todos os elementos se comportam como se pointer-events: none;
tivesse definido. Nem mesmo o botão que abre a caixa de diálogo reage às interações.
Quando a caixa de diálogo é aberta, o foco é movido para ela. O foco é definido no primeiro elemento na ordem sequencial de navegação do teclado dentro dessa caixa de diálogo.
Se você pressionar a tecla tab repetidamente, vai notar que apenas o conteúdo dentro da caixa de diálogo pode receber o foco enquanto a caixa de diálogo modal estiver
aberta. Tudo fora da caixa de diálogo modal fica inativo enquanto ela estiver aberta.
Quando uma caixa de diálogo é fechada, modal ou não, o foco é retornado ao elemento que abriu a caixa. Se você abrir uma caixa de diálogo de forma programática sem basear na ação do usuário, reconsidere. Se necessário, garanta que o foco seja colocado de volta onde estava antes da abertura da caixa de diálogo, especialmente se o usuário dispensar a caixa de diálogo sem interagir com ela.
Há um atributo global inert que pode ser usado para desativar um elemento e todos os seus descendentes, exceto qualquer caixa de diálogo
ativa. Quando uma caixa de diálogo modal é aberta usando showModal(), a inércia ou desativação é sem custo financeiro. O atributo
não é definido explicitamente.
O plano de fundo que obscurece tudo, exceto a caixa de diálogo, pode ser estilizado usando o pseudoelemento
::backdrop. O plano de fundo só aparece quando um <dialog> é mostrado com o método .showModal(). Esse pseudoelemento
corresponde a todos os planos de fundo, incluindo aquele exibido quando a API FullScreen é usada,
como ao assistir um vídeo no modo de tela cheia que não tem a mesma proporção da tela ou do monitor.
Caixas de diálogo não modais
O HTMLDialogElement.show() também abre uma caixa de diálogo, mas sem adicionar um plano de fundo ou fazer com que nada se torne inativo.
A tecla de escape não fecha caixas de diálogo não modais. Por isso, é ainda mais importante incluir um método
de fechamento da caixa de diálogo não modal. Se o fechamento estiver fora da caixa de diálogo, o foco vai ser direcionado ao elemento
que abriu a caixa, o que não é a melhor experiência do usuário.
Embora um botão para fechar a caixa de diálogo não seja oficialmente exigido pela especificação, considere-o como obrigatório. A tecla Escape fecha uma caixa de diálogo modal, mas não uma não modal. Um botão visível que pode receber o foco melhora a acessibilidade e a experiência do usuário.
Fechar uma caixa de diálogo
Não é necessário usar o método HTMLDialogElement.close() para fechar uma caixa de diálogo. Você não precisa de JavaScript. Para fechar o <dialog>
sem JavaScript, inclua um formulário com um método de caixa de diálogo definindo method="dialog" no <form> ou formmethod="dialog"
no botão.
Quando um usuário envia pelo método dialog, o estado dos dados inseridos pelo usuário é mantido. Enquanto há um evento de envio, o
formulário passa pela validação de restrição (a menos que novalidate esteja definido). Os dados do usuário não são limpos nem enviados.
Um botão de fechar sem JavaScript pode ser escrito como:
<dialog open>
<form method="dialog">
<button type="submit" autofocus>close</button>
</form>
</dialog>
Você pode ter notado o atributo autofocus
definido na <button> de fechamento neste exemplo. Os elementos com o atributo autofocus definido em um <dialog> não receberão
foco no carregamento da página, a menos que a página seja carregada com a caixa de diálogo visível. No entanto, eles vão receber o foco quando a caixa de diálogo for aberta.
Por padrão, quando uma caixa de diálogo é aberta, o primeiro elemento com foco nela recebe o foco, a menos que um elemento
diferente na caixa de diálogo tenha o atributo autofocus definido. A configuração do atributo autofocus no botão de fechamento garante
que ele receba o foco quando a caixa de diálogo for aberta. No entanto, a inclusão de autofocus em um <dialog>
deve ser feita com muita consideração. Todos os elementos na sequência que vêm antes do elemento com foco automático são pulados.
Discutiremos esse atributo mais detalhadamente na aula de foco.
A interface HTMLDialogElement inclui uma propriedade
returnValue. O envio de um formulário com um method="dialog" define o returnValue como o name, se houver, do botão de envio usado para enviar o formulário. Se tivéssemos escrito <button type="submit" name="toasty">close</button>, o returnValue seria toasty.
Quando uma caixa de diálogo é aberta, o atributo booleano open
está presente, o que significa que a caixa de diálogo está ativa e pode ser usada. Quando uma caixa de diálogo é aberta adicionando o atributo open em vez
de .show() ou .showModal(), ela não é modal. A propriedade HTMLDialogElement.open
retorna true ou false, dependendo se a caixa de diálogo está disponível para interação, não se ela é modal ou não.
Embora o JavaScript seja o método preferido para abrir uma caixa de diálogo, incluir o atributo open no carregamento da página e removê-lo
com .close() pode ajudar a garantir que a caixa de diálogo esteja disponível mesmo quando o JavaScript não estiver.
Mais detalhes
Não use tabindex
O elemento que é ativado para abrir a caixa de diálogo e o botão de fechamento contido nela (e possivelmente outro conteúdo) podem receber
foco e são interativos. O elemento <dialog> não é interativo e não recebe foco. Não adicione a propriedade tabindex
à caixa de diálogo.
Funções ARIA
O papel implícito é dialog. Se a caixa de diálogo
for uma janela de confirmação que comunica uma mensagem importante que exige uma confirmação ou outra resposta do usuário, defina role="alertdialog".
A caixa de diálogo também precisa ter um nome acessível. Se o texto visível puder fornecer o nome acessível, adicione aria-labelledby="idOfLabelingText".
Padrões do CSS
Os navegadores fornecem o estilo padrão para dialog. O Firefox, o Chrome e o Edge definem color: CanvasText; background-color: Canvas;
e o Safari define color: black; background-color: white; nas folhas de estilo do user agent. O color é herdado
de dialog, e não de body ou :root, o que pode ser inesperado. A propriedade background-color não é herdada.
Teste seu conhecimento
Teste seus conhecimentos sobre o elemento de caixa de diálogo.
Como você estiliza a área por trás da caixa de diálogo?
::background.::backdrop.background.