Criando modais nativos com o elemento dialog

Usar elementos customizados de diálogo no lugar das implementações nativas do navegador, como alert, confirm ou prompt, se tornou o padrão do desenvolvimento web há bastante tempo (popularizado por diversos plugins do jQuery e pelo próprio Bootstrap), de modo que, a cada nova biblioteca de UI que surge¹²³, é comum que seus autores re-implementem um modal com o framework da vez (que podem ou não implementar acessibilidade WAI-ARIA).

Mas agora, com a chegada do elemento <dialog> no HTML5 (suportado por 93,85% dos navegadores em uso), é muito mais fácil criar diálogos de forma nativa. Neste artigo, vamos ver como criar um diálogo modal (e não-modal) simples com o elemento <dialog>.

Entendendo o elemento dialog

No sentido empregado no desenvolvimento de interfaces de usuário, um diálogo é uma conversação entre o sistema e o usuário, onde o sistema espera uma resposta do usuário para continuar. Um diálogo pode ser modal ou não-modal. Um diálogo modal (isto é um, um diálogo que muda o modo de interação do usuário com o sistema) é aquele que trava a interface, impedindo o usuário de interagir com o restante da página até que ele seja fechado. Um diálogo não-modal (isto é um, um diálogo que não muda o modo de interação do usuário com o sistema), por outro lado, permite que o usuário interaja com o restante da página enquanto o diálogo está aberto.

A maneira mais simples de colocar um diálogo não-modal na tela é da seguinte forma:

<dialog open>
  <p>Olá, mundo!</p>
  <form method="dialog">
    <button>Fechar</button>
  </form>
</dialog>

Note o formulário, na linha 5, com o método dialog. É este formulário que envia ações para o dialog. Ele será exibido dessa forma:

O que torna o exemplo acima um diálogo não modal é o uso do atributo open (linha 1), o que também faz com que ele não possa ser fechado com a tecla Esc. Também é possível criar um diálogo não modal usando a API JavaScript:

Agora, para que o diálogo se comporte como um modal, é necessário que ele seja aberto através de sua API JavaScript, você pode ver no exemplo a seguir:

Desta vez, abrimos e fechamos o modal com JavaScript e colocamos o resultado do formulário no elemento output quando o modal é fechado. Leia o código com calma e tente entender o que está acontecendo.

Estilizando o modal

O elemento dialog pode (é claro), ser estilizado como qualquer outro elemento HTML. Atente-se, porém, que, para estilizar o overlay (o fundo escuro que fica atrás do modal), é necessário usar o seletor ::backdrop:

Polyfill

Se você quiser usar o dialog e não ter problemas de compatibilidade em navegadores mais antigos, pode usar este polyfill.

Referências

• Dialog
• Dialog
• Modal & Nonmodal Dialogs: When (& When Not) to Use Them