Diálogos e modais são partes integrantes da maioria das aplicações web. Embora construí-los à mão não seja uma tarefa complexa, é uma tarefa que rapidamente se torna tediosa para qualquer desenvolvedor web. A alternativa usual para construí-los manualmente é usar um componente construído por outra pessoa.

Existem alguns problemas com essa abordagem, no entanto. São tantas opções que fica difícil saber qual componente seria melhor usar, e personalizar a aparência de tais componentes às vezes pode ser tão tedioso quanto construir um diálogo à mão. Felizmente, há outra alternativa: o elemento de diálogo HTML.

O que é o elemento de diálogo?

O elemento de diálogo HTML é uma tag HTML integrada (como div ou span), que permite aos desenvolvedores criar diálogos e modais personalizados. O elemento de diálogo existe no Chrome e no Opera desde 2014, mas só recentemente passou a ser suportado por todos os principais navegadores.

Por que usar o elemento de diálogo?

A principal razão para usar o elemento de diálogo é a conveniência. Isso facilita a criação de diálogos que podem aparecer em linha ou como modais, com nada mais do que uma única tag HTML e algumas linhas de JavaScript.

O elemento dialog elimina a necessidade de construir e depurar uma caixa de diálogo personalizada ou importar o componente de outra pessoa. Também é muito fácil estilizar com CSS.

Suporte do navegador para o elemento de diálogo

Infelizmente, o suporte do navegador para o elemento de diálogo poderia ser melhor. Ele é compatível com as versões mais recentes de todos os principais navegadores em março de 2022, com algumas ressalvas.

Qualquer navegador Firefox anterior ao Firefox 98 só será compatível se estiver habilitado manualmente nas configurações do navegador, e qualquer versão do Safari anterior ao Safari 15.4 não oferece suporte a ele. Os detalhes completos do suporte ao navegador estão disponíveis em eu posso usar.

Felizmente, isso não significa que o elemento de diálogo esteja inutilizável. A equipe do Google Chrome mantém um polyfill que você pode encontrar em Github para o elemento de diálogo que fornece suporte para ele mesmo em navegadores onde não há suporte nativo.

Em sua forma atual, o elemento de diálogo pode ter problemas de acessibilidade, portanto, pode ser mais adequado usar um componente de diálogo personalizado como a11y-diálogo em aplicações de produção.

Como usar o elemento de diálogo

Para demonstrar como usar o elemento de diálogo, você o usará para criar um recurso de site comum: um modal de confirmação para um botão de exclusão.

Tudo o que é necessário para acompanhar é um único arquivo HTML.

1. Configurar o arquivo HTML

Comece criando o referido arquivo e nomeando-o index.html.

Em seguida, estabeleça a estrutura do arquivo HTML e forneça algumas meta-informações básicas sobre a página, para que ela seja renderizada corretamente em todos os dispositivos.

Digite o seguinte código em index.html:

<!DOCTYPE html>
<html lang="pt">
<cabeça>
<metacharset="UTF-8">
<meta http-equiv="Compatível com X-UA" conteúdo="IE=borda">
<metanome="janela de exibição" conteúdo="largura=largura do dispositivo, escala inicial=1,0">
<título>Demonstração da caixa de diálogo</title>
</head>
<estilo></style>


<corpo></body>
<roteiro></script>
</html>

Essa é toda a configuração necessária para este projeto.

2. Escrevendo a marcação

Em seguida, escreva a marcação para o botão de exclusão, bem como o elemento de diálogo.

Digite o seguinte código na tag body de index.html:

<classe div="recipiente-botão">
<botão>
Excluir item
</button>
</div>
<diálogo>
<div>
 Você tem certeza que quer excluiristo item?
</div>
<div>
<classe de botão ="perto">
 Sim
</button>
<classe de botão ="perto">
 Não
</button>
</div>
</dialog>

O HTML acima criará:

  • Um botão de exclusão.
  • O elemento de diálogo.
  • Dois botões dentro da caixa de diálogo.

Se index.html estiver aberto em seu navegador, o único elemento visível na tela será o botão de exclusão. Isso não significa que há algo errado, o elemento de diálogo simplesmente requer um pouco de JavaScript para se tornar visível.

3. Adicionando JavaScript

Agora, escreva o código que abrirá a caixa de diálogo quando um usuário clicar no botão excluir, bem como o código para permitir que a caixa de diálogo seja fechada.

Digite o seguinte na tag de script de index.html:

const modal = documento.querySelector("diálogo")
document.querySelector("botão .button-container").addEventListener("clique", () => {
modal.showModal();
});
const closeBtns = documento.getElementsByClassName("fechar");
for (btn de closeBtns) {
 btn.addEventListener("clique", () => {
modal.perto();
 })
}

Este código usa o método querySelector para obter referências aos botões e à caixa de diálogo. Em seguida, ele anexa um ouvinte de evento de clique a cada botão.

Você pode estar familiarizado com ouvintes de eventos em JavaScript, que você mesmo pode usar. O ouvinte de eventos anexado ao botão de exclusão chama o método showModal() para exibir a caixa de diálogo quando o botão é clicado.

Cada botão dentro do modal tem um ouvinte de evento anexado a ele que usa o método close() para ocultar a caixa de diálogo quando eles são clicados.

Mesmo que não haja JavaScript que chame o método close() no código, os usuários também podem fechar o modal pressionando a tecla Escape em seu teclado.

Agora que esse JavaScript está em vigor, se um usuário clicar no botão excluir, o modal será aberto e clicar no botão sim ou não fechará o modal.

É assim que o modal aberto deve se parecer:

Uma coisa digna de nota é que o elemento dialog já vem com algum estilo, mesmo que não haja CSS em index.html. O modal já está centralizado, possui uma borda, a largura é limitada ao conteúdo e possui algum padding padrão.

Os usuários não podem interagir (clique, selecione) com nada em segundo plano enquanto o modal estiver aberto.

O elemento de diálogo também pode ser exibido como parte do fluxo da página em vez de como um modal. Para experimentá-lo, altere o primeiro ouvinte de evento no JavaScript da seguinte forma:

document.querySelector("botão .button-container").addEventListener("clique", () => { modal.show(); });

A única coisa que mudou neste código é que o código está chamando o método show(), em vez do método showModal(). Agora, quando um usuário clica no botão excluir item, o modal deve abrir inline assim:

4. Adicionar estilo

Em seguida, personalize a aparência da caixa de diálogo e seu plano de fundo escrevendo CSS.

O CSS reduzirá a borda da caixa de diálogo, limitará sua largura máxima e escurecerá o plano de fundo, além de adicionar um pouco de estilo aos botões.

Estilizar o diálogo em si é simples, mas a pseudoclasse de pano de fundo é necessária para adicionar um estilo que tenha como alvo o plano de fundo do diálogo.

Cole o seguinte código na tag de estilo de index.html:

diálogo:: pano de fundo {
 fundo: preto;
opacidade: 0.5;
}
botão {
 raio da borda: 2px;
 cor de fundo: branco;
 borda: preto sólido de 1px;
 margem: 5px;
 box-shadow: 1px 1px 2px cinza;
}
diálogo {
 largura máxima: 90vw;
 borda: preto sólido de 1px;
}

Quando a caixa de diálogo estiver aberta, ela deverá ficar assim:

E você construiu uma caixa de diálogo totalmente funcional.

O elemento de diálogo é uma ótima maneira de construir modais

Usando o elemento de diálogo HTML que recentemente ganhou suporte em todos os principais navegadores, os desenvolvedores da Web agora podem criar arquivos totalmente funcionais, modais e diálogos facilmente personalizáveis ​​com uma tag HTML e algumas linhas de JavaScript e sem a necessidade de depender de terceiros solução.

O elemento dialog possui um polyfill mantido pela equipe do Google Chrome, que permite aos desenvolvedores usar dialog em versões de navegador que não o suportam.