Como criar uma modal com a tag dialog

Um dos componentes mais comuns da web é a modal, ou, os chamados pop-up. Podemos utilizar esse componente para várias situações, tanto dar ao usuário um aviso que chame atenção, quanto simplemente chama-lo para newsletter. Enfim, seu uso é bem flexivel e hoje aprenderemos como criar uma modal utilizando ferramentas básica, que são o HTML, CSS e JavaScript.

Curso HTML5 + CSS3 - Apresentação de Dados

Conhecer o curso

Iniciando a nossa modal com HTML

A princípio, criaremos a estrutura, todo o conteúdo da modal e o botão que irá disparar o evento de abertura da nossa modal. Vamos iniciar com o botão de abertura.

<button id="abrir-modal">Abrir modal</button>

Aqui criamos o botão com o texto Abrir modal, já aproveitei e adicionei o id abrir-modal. Esse id irá nos auxiliar a capturar esse elemento e manipula-lo com JavaScript. Agora criamos a modal de fato, como o título desse artigo sugere, utilizaremos a tag dialog. Dentro dessa tag, podemos criar a estrutura que fizer sentido para o projeto. Vou utilizar um título, parágrafo e um botão para ser adicionado o evento de fechamento da modal.

<dialog open="true" id="minha-modal">
	<h2>Minha modal</h2>
	<p>Essa é uma simples maneira de criar uma modal</p>
	<button id="fechar-modal">fechar</button>
</dialog>

Adicionei o atributo open="true" é simplesmente para que possamos ver o elemento e facilitar na estilização. Os outros dois ids adicionados foram o id da própria modal id="minha-modal" e o de fechamento da modal com o nome id="fechar-modal".

E isso é tudo que precisa para a nossa modal no HTML, obviamente, o conteúdo é fictício para fins didáticos, porém, caso queira você pode adicionar qualquer elemento HTML dentro da modal.

Estilizando a nossa modal

As estilizações de uma modal, pode ser feita normalmente, capturando os elementos com seletores que todos conhecemos, caso haja alguma dúvida quanto aos seletores CSS não tem problema. Aqui está um artigo sobre os Seletores Básicos do CSS, caso tenha acesso a plataforma, temos também um curso direcionado a esse tema essencial, o HTML5 + CSS3 - Propriedades e seletores avançados.

Bom, se você está acompanhando o passo a passo desse tutorial, você deve estar vendo, no seu navegador, algo similar a isso:

Aqui nós temos o botão Abrir modal, entretanto, ainda sem a ação de abrir a modal. Também temos a própria modal, podemos observar algumas estilizações pré definidas pelo navegador. Como por exemplo, a modal centralizada e uma borda envolvendo o elemento. Tudo isso é normal, pois estamos utilizando a tag apropriada para criar esse componente. É importante ter em mente que podemos alterar e adicionar os estilos que forem necessários com CSS.

Vou fazer algumas mudanças básicas na minha modal, porém, fique a vontade para fazer as mudanças que você preferir, aqui estão os estilos:

#minha-modal {
	border: solid 1px gray;
	border-radius: 5px;
}

#fechar-modal {
	background-color: rgb(53, 53, 167);
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	border: none;
	transition: .4s;
}

#fechar-modal:hover {
	transform: scale(1.05);
}

E a modal ficou dessa forma:

Agora que a modal está estilizada, podemos remover o atributo open="true", pois, vamos adicionar o evento de click no botão, para que esse componente tenha o comportamento correto.

Curso JavaScript - Fundamentos

Conhecer o curso

Adicionando o evento de click no botão para abrir a modal

Até o momento, temos a nossa modal praticamente feita, faltando apenas o evento de click no botão de abertura para que possamos dar o comportamento correto ao componente. Então, vamos a ele.

Ao final da body vou abrir uma tag de script, é dentro dessa tag onde ficarão contidos os códigos JavaScript que tornarão a modal visível sempre que o botão for clicado. Primeiramente, irei capturar todos os elementos necessário para executar tal ação.

let modal = document.getElementById('minha-modal');
let abrirModal = document.getElementById('abrir-modal');
let fecharModal = document.getElementById('fechar-modal');

Como podemos observar eu peguei os elementos que criamos no HTML, o botão de abertura, a própria modal e o botão de fechamento da modal. Após isso, é necessário atribuir o evento de click para abrir a modal no botão de abertura. Todas vez que o botão for clicado ele irá executar o método showModal() da modal, esse código ficará dessa forma:

abrirModal.addEventListener('click', () => {
	modal.showModal();
})

A modal já está com o comportamento correto, ou seja, abrindo sempre que clicamos no botão do evento, porém, para fecha-la, é necessário, atualizar a página ou apertar a tecla Esc do teclado. Isso é extremamente contra intuitivo para os usuários, é importante adicionar algo claro que o usuário possa fechar a modal, por isso, criamos o botão de fechar. Vamos, então, adicionar um evento de click nesse botão utilizando o método JavaScript close(). Dessa forma o usuário terá uma maneira simples e clara de como fechar a modal.

fecharModal.addEventListener('click', () => {
	modal.close()
})

Agora que o componente está completo e com comportamento adequado. Há outro aspecto que podemos alterar com CSS, achei melhor deixar para o final que assim o entendimento fica mais claro. Essa alteração é a cor de fundo da modal. Por padrão o fundo da modal, ou seja, tudo que não está dentro da modal, já recebe um escurecimento, atraindo atenção do usuário para o conteúdo da modal. Porém, podemos alterar sua cor, deixando ainda mais escuro o fundo. Fazemos essa alteração com a pseudo classe backdrop.

#minha-modal::backdrop {
	background: #5a5a5a7c;
}

Utilizei uma cor suave, que dá um leve escurecimento para o fundo, mas lembrando, que você pode adicionar a cor que desejar. O resultado ficou assim:

Curso JavaScript - Novidades do ES6 (ES2015)

Conhecer o curso

Conclusão

Em suma, ao utilizar a tag dialog, é possível criar facilmente modais responsivas e acessíveis. Ao seguir os passos mencionados, você pode incorporar essa funcionalidade de forma eficiente em seu projeto, oferecendo uma experiência interativa e amigável aos usuários.

Caso queira, temos conteúdo aberto no YouTube dedicado a esse tema, o vídeo Conheça a tag dialog do HTML, nesse tutorial você pode acompanhar de forma mais visual tudo que aprendemos nesse artigo.