Aguarde, carregando...

JS-0503 - JavaScript Completo ES6 - Modal

JS-0503 - JavaScript Completo ES6 - Modal
Publicado em 28/03/2021 17h38

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:

JS-0503 - JavaScript Completo ES6 - Modal

Para que a organização do grid do body da página 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):

JS-0503 - JavaScript Completo ES6 - Modal

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

JS-0503 - JavaScript Completo ES6 - Modal

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.

JS-0503 - JavaScript Completo ES6 - Modal
JS-0503 - JavaScript Completo ES6 - Modal
JS-0503 - JavaScript Completo ES6 - Modal

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

JS-0503 - JavaScript Completo ES6 - Modal

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

JS-0503 - JavaScript Completo ES6 - Modal

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:

JS-0503 - JavaScript Completo ES6 - Modal

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:

JS-0503 - JavaScript Completo ES6 - Modal

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 active no 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):

JS-0503 - JavaScript Completo ES6 - Modal

Para visualizar o projeto em andamento, clique aqui.

Para baixar o projeto, clique aqui.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.