Rodrigo Brito

Implementando fácil uma modal com JavaScript

A modal é um elemento que aparece na tela mediante uma determinada ação de um evento (click, scroll etc) exigindo ação ou não do usuário. Este elemento aparece em primeiro plano, cobrindo toda a tela, apresentando um conteúdo específico, tal como uma propaganda, caixa de login, aviso, aceitação de política de cookies etc.

Este elemento é geralmente carregado no html da página, dependendo da linguagem, ou gerado via script. O efeito de entrada na tela é totalmente controlável.

Neste exemplo, será codificado uma caixa de login que surge a partir de um evento de click. Para este exemplo será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

A maior carga de codificação será praticamente no CSS. Para permitir um reaproveitamento do código de estilização da modal, bem como uma melhora organização, no estilo do projeto será utilizada a importação de estilos. O antigo style.css será o arquivo central de estilos e importará o base.css e o modal.css. Para tal, todo o código do style foi transferido para o base. O style.css, bem como a reorganização pode ser vista na imagem abaixo:

Para que a organização do grid do body da página não conflite com a modal, que é um novo elemento isolado, todo o conteúdo do body será envolvido por uma div que receberá o estilo do grid-container do projeto (classe grid-container da imagem abaixo):

No CSS, o grid-template do body será transferido para a classe grid-container. A alteração é a seguinte:

No media query, o body foi substituído pela classe grid-container.

Agora, vamos para a codificação da modal. O código da modal vai ficar no final da página, abaixo do footer com um dataset para o trabalho com o JS.

Este código contém uma seção, com uma div que abriga um form (não será implementado um action) com os inputs de login e um botão de submit. A div contém um botão para fechar a modal (letra "X").

Nesse instante, a seção estará visível ao final da página. Próximo passo, a estilização.

A classe modal-container ocupará a tela de ponta a ponta com um background transparente, posição fixa, o que o deixará sobrepondo o conteúdo principal, além de um z-index e conteúdo alinhado ao centro. O corpo da modal receberá um estilo básico, com background, borda, uma sombra chapada formando uma segunda borda. Os inputs e botão também não tem nada de especial. Somente o botão de fechar, com o X, tem sua posição absolut em relação a moda, permitindo o deslocamento para o canto superior direito. O código do css de certa forma é extenso para ser contido em uma única imagem, então será dividido para uma melhora visualização (o código está disponível para download no link no fina da página). As variáveis são as definidas no base.css.

Após este passo, a modal está da seguinte forma:

A modal receberá uma animação de entrada quando receber a classe "active" via JS:

Agora, será adicionada a classe active que será manipulada via JS, chamada de active, que será o alvo para deixar a modal como display flex, pois esta estará definida por padrão como display none, na modal-container:

Neste momento a modal está oculta. O botão que será utilizado como alvo para disparar o evento de abertura da modal será o "WEB" do menu. Para ficar de acordo com o propósito do exemplo, será alterado para "LOGIN", recebendo um dataset. O link será desativado através do JavaScript com um preventDefault, ficando da seguinte forma:

Finalmente o nosso JS! O mais simples para o final!

Em um novo arquivo chamado de modal, dentro de modules, será criado o código, importado no script.js com o nome de modal, através de um export default.

No código, é necessário selecionar todos os botões de abrir, fechar e seção da modal, utilizando os dataset. Há somente duas observações:

• Toogle: é utilizado para adicionar uma classe quando ela não existir e remove quando ela existir no alvo. No exemplo, vai adicionar ou remover a classe activeno elemento, que vai aplicar o display flex ou devolver o display none; e
• Ao clicar fora da modal, o padrão é fechar a modal. A seção da modal corresponde a este espaço, mas ela ocupa toda a tela, e se não for realizada uma verificação para ver se o target do elemento é realmente a seção, ao ser realizado qualquer clique dentro da div, também fechará a modal. Então, a função de fechar clicando fora da div receberá um if comparando o target ao this, onde this corresponde efetivamente a seção, pois este é o elemento selecionado na constante containerModal.

O "if (openButton && closeButton && containerModal)" tem o propósito de verificar a existência dos elementos, para executar a ativar as funções somente na existência destes. Isto é uma prática que previne o retorno de erros.

O código do JS ficou o seguinte (é só isso mesmo):

Para visualizar o projeto em andamento, clique aqui.

Para baixar o projeto, clique aqui.