Douglas Moura

Douglas Moura

Engenheiro de Software

Douglas Moura

Douglas Moura

Engenheiro de software, músico and jiujiteiro

Criando modais nativos com o elemento dialog

Publicado em:Publicado em:Atualizado em:

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 surge123, é 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

Footnotes

  1. Modal do Material UI

  2. Modal do Ant Design

  3. Modal do Carbon Design System

Deixe um comentário

Carregando comentários...