Caixa de diálogo

O elemento de caixa de diálogo é útil para representar qualquer tipo de caixa de diálogo em HTML. Saiba como ele funciona.

Uma caixa de diálogo modal é um tipo especial de caixa pop-up em uma página da Web que interrompe o usuário para se concentrar em si mesma. Existem alguns casos de uso válidos para abrir uma caixa de diálogo, mas é preciso considerar bem antes de fazer isso. As caixas de diálogo modais forçam os usuários a se concentrar em um conteúdo específico e, pelo menos temporariamente, ignorar o restante da página.

As caixas de diálogo podem ser modais (só é possível interagir com o conteúdo dentro da caixa) ou não modais (ainda é possível interagir com o conteúdo fora da caixa). As caixas de diálogo modais são exibidas na parte de cima do restante do conteúdo da página. O restante da página fica inerte e, por padrão, é ocultado 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 modais

Confira um exemplo de um modal <dialog>. Abra a caixa de diálogo com o botão "Abrir caixa de diálogo modal". Depois de aberto, há três maneiras de fechar a caixa de diálogo: a tecla "Esc", o envio de um formulário com um botão que tem o formmethod="dialog" definido (ou se o próprio 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 esse <dialog> foi aberto com o método HTMLDialogElement.showModal(), ele é 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; estivesse definido. Até mesmo o botão que abre a caixa de diálogo não reage às interações.

Quando a caixa de diálogo é aberta, o foco é movido para ela. O foco é definido no primeiro elemento na ordem de navegação sequencial do teclado dentro dessa caixa de diálogo. Se você pressionar a tecla tab várias vezes, apenas o conteúdo da caixa de diálogo poderá receber o foco enquanto a caixa de diálogo modal estiver aberta. Tudo fora da caixa de diálogo modal fica inerte enquanto ela está aberta.

Quando uma caixa de diálogo é fechada, modal ou não, o foco volta para o elemento que a abriu. Evite abrir uma caixa de diálogo de forma programática sem uma ação do usuário. Se for necessário, coloque o foco de volta onde estava antes da abertura da caixa de diálogo, principalmente 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 descendentes dele, exceto qualquer caixa de diálogo ativa. Quando uma caixa de diálogo modal é aberta usando showModal(), a inércia ou desativação vem com ela. O atributo não é definido explicitamente.

O plano de fundo que encobre tudo, exceto a caixa de diálogo, pode ser estilizado usando o pseudoelemento ::backdrop. O plano de fundo só é mostrado quando um <dialog> é exibido com o método .showModal(). Esse pseudoelemento corresponde a todos os planos de fundo, incluindo o que é mostrado quando a API FullScreen é usada, como ao assistir um vídeo em 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 algo fique inerte. A tecla "Esc" 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. Ao fazer isso, se o fechamento estiver fora da caixa de diálogo, o foco vai para o elemento que abriu a caixa, o que pode não ser 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 Esc fecha uma caixa de diálogo modal, mas não uma não modal. Um botão visível que pode receber foco melhora a acessibilidade e a experiência do usuário.

Fechar uma caixa de diálogo

Não é necessário 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 com o método dialog, o estado dos dados inseridos pelo usuário é mantido. Embora haja um evento de envio, o formulário passa pela validação de restrição (a menos que novalidate esteja definido), mas 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ê talvez tenha notado o atributo autofocus definido no <button> de fechamento neste exemplo. Os elementos com o atributo autofocus definido em um <dialog> não vão receber foco no carregamento da página, a menos que ela seja carregada com a caixa de diálogo visível. No entanto, eles recebem foco quando a caixa de diálogo é aberta.

Por padrão, quando uma caixa de diálogo é aberta, o primeiro elemento focalizável dentro dela recebe o foco, a menos que um elemento diferente na caixa tenha o atributo autofocus definido. Definir o atributo autofocus no botão de fechar garante que ele receba o foco quando a caixa de diálogo for aberta. Mas incluir autofocus em um <dialog> só deve ser feito com muita consideração. Todos os elementos na sequência antes do elemento com foco automático são ignorados. Vamos falar mais sobre esse atributo na aula de foco.

A interface HTMLDialogElement inclui uma propriedade returnValue. Enviar 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 de a caixa de diálogo estar disponível para interação, e 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 ativado para abrir a caixa de diálogo e o botão de fechar contido nela (e possivelmente outros conteúdos) 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.

Papéis ARIA

A função implícita é 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 de CSS

Os navegadores fornecem um 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.