DIGITE E APERTE ENTER
Front-end / 25 mar 2019
Criando modal com JavaScript e CSS puro

Um recurso muito utilizado para mostrar conteúdos que precisam de uma atenção maior do usuário é o modal. Basicamente é uma evolução dos popups.

Criando uma modal com JavaScript e CSS

Existem diversos plugins de js disponíveis na internet para criar janelas modal, mas a verdade é que trata-se de um recurso simples e fácil de ser criado sem a necessidade de utilizar um plugin.

Costumo não gostar muito de utilizar muitos plugins nos meus projetos por conta da experiência que adquiri no meu trabalho diário na rádio Metropolitana percebi que em sites com alto tráfego qualquer byte conta e isso pode refletir em diversos problemas como alto consumo de bandwidth, quedas no servidor, dentre outros bugs que podem acontecer por conta do grande número de visitas.

Mas chega de conversa e vamos colocar a mão na massa (ou no código) 🙂

Definindo HTML da Modal

Primeiramente vamos definir o nosso HTML para, posteriormente, estilizarmos. Vamos criar um título para dar nome a nossa página e também um botão que ficará responsável por abrir nossa modal.

Será necessário criar também uma div vazia com o id “overlay” e a div que será de fato nossa modal. Logo nosso HTML ficará assim:

<div id='overlay'></div>
<h1>Modal com JavaScript e CSS</h1>

<button>Abrir Modal</button>

<div id="modal">
  <h3>Este é o modal</h3>
  <p>Pellentesque ac risus nulla. Cras a est venenatis mauris auctor rhoncus. Proin feugiat id lorem nec mattis. Cras nec feugiat felis. Duis quis metus non nisl aliquam consequat sed a dui. Quisque urna nulla, tempor sit amet dolor ut, eleifend porta sapien. Donec at nibh ut augue ornare condimentum nec id dolor.</p>
  <button>Fechar Modal</button>
</div>

Apenas para explicar, a div com o id overlay será responsável por criar aquele fundo preto transparente para tirar o foco da página e levar o usuário a prestar atenção no modal. O título é apenas para informação a parte importante agora é o botão que utilizaremos para abrir o modal.

A div com o id modal será de fato a nossa janela modal e todo o conteúdo que deve ser mostrado neste modal deverá estar dentro dela. Coloquei também um conteúdo de exemplo e um botão para fechar a modal. A maior parte das janelas modal se fecham também quando o usuário clica do lado de fora da janela, portanto mostrarei também como fazer este efeito. Neste momento nosso código deve estar parecido com a imagem abaixo.

Estilizando a Modal com CSS

No CSS estaremos estilizando toda a aparência da nossa modal, mas o principal iremos informar as propriedades para que ao carregar a página nossa modal ainda não esteja visível para o usuário.

A div que tem a função de fazer o nosso overlay recebeu um ID porque ela nunca deve se repetir no código, portanto optei por trabalhar desta forma, porém se você tiver mais de uma modal em sua página cada uma deverá ter um ID diferente, mas você pode criar uma classe para estilizar todas sem precisar ficar duplicando seu código.

Bem para o CSS teremos algo mais ou menos como mostrado abaixo:

#overlay {
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  z-index: 998;
}

#modal {
  display: none;
  z-index: 9999;
  padding: 40px;
  width: 50vw;
  margin: 0 auto;
  background-color: #084C61;
  color: #fff;
  border-radius: 50px;
  position: relative;
}

Quanto ao CSS explicarei apenas as propriedades que tem maior importância para que nossa modal funcione. Basicamente tudo vai funcionar através da propriedade display, inicialmente a deixaremos com o valor none para que os elementos não estejam visíveis ao usuário.

Vamos começar nossa analise pelo ID overlay. Escolhi utilizar a cor de background com a propriedade rgba() que é uma variação da rgb(), a diferença aqui é que podemos colocar o Alpha que irá controlar o nível de transparência da cor que configuramos na parte do rgb, lembrando que o significado seria Red, Green e Blue como informei o valor 0 para cada um deles terei a cor preta com 50% de transparência.

As propriedades width e height forma configuradas em 100% para pegar a largura e altura total da página. Position deixei como absolute e o top e left como 0 para que seja que seja mostrado por cima da página inteira começando do canto esquerdo superior.

A propriedade display com o valor none serve para deixar a div escondida no momento de carregamento da página, ela será modificada dinamicamente utilizando JavaScript logo mais.

Uma propriedade importante aqui é o z-index vai com o valor 998 vai deixar nossa div por cima das outras, esta propriedade funciona como se cada número fosse uma camada, logo se um elemento tiver 997 e outro 998 este último será mostrado por cima do primeiro.

Isto encerra nosso ID overlay, analisaremos agora o modal que também começa com a propriedade display com o valor none. O z-index com 9999 serve para deixar o modal acima do overlay. Com o width em 50vw indico que quero a largura em 50% do tamanho da tela (viewport) do dispositivo e o margin em 0 auto centraliza a modal.

Os outros atributos são mais para deixar com um layout mais bonito, com os explicados acima já é possível criar sua modal, então para não ficar muito grande este post irei partir para o JavaScript, mas se tudo correu bem até agora sua página deve estar mais ou menos como a imagem abaixo.

Abrindo e fechando a modal com JavaScript

Nesta última parte iremos de fato fazer nossa modal funcionar ao clicarmos nos botões de abrir/fechar e também ensinarei como criar o efeito para que ela se feche quando o usuário clicar fora da janela (no overlay).

Para isto criarei 2 funções uma que abre e outra que fecha a janela, utilizaremos o ID overlay para detectar quando o usuário clicar fora da modal com a função getElementByID do javascript.

Nosso código ficará como abaixo.

function abrirModal() {
  document.getElementById('overlay').style.display="block";
  document.getElementById('modal').style.display="block";
}

function fecharModal() {
  document.getElementById('overlay').style.display="none";
  document.getElementById('modal').style.display="none";
}

document.getElementById('overlay').onclick = function(){
  fecharModal();
}

Explicando o código acima, a função abrirModal ira pegar o overlay pelo ID e atualizará o atributo display de none para block, assim ele será mostrado quando a função for acionada, o mesmo será feito com o modal.

A função fecharModal fará exatamente o inverso, modificando os atributos display de block para none. Estou utilizando também a função getElementById para que o código detecte quando o usuário clique no overlay ele acione a função fechar modal.

Integrando o JavaScript com o HTML

Agora esta tudo basicamente pronto, falta apenas incluirmos as chamadas das funções para abrir/fechar a modal em nosso HTML. Para isso utilizaremos o atributo onclick que detecta quando o elemento é clicado. Estes serão inseridos nos dois botões criados anteriormente, um na página e o outro na própria modal.

Nosso HTML ficará como o mostrado abaixo.

<div id='overlay'></div>
<h1>Modal com JavaScript e CSS</h1>

<button id="abrirModal" onclick="javascript:abrirModal();">Abrir Modal</button>

<div id="modal">
  <h3>Este é o modal</h3>
  <p>Pellentesque ac risus nulla. Cras a est venenatis mauris auctor rhoncus. Proin feugiat id lorem nec mattis. Cras nec feugiat felis. Duis quis metus non nisl aliquam consequat sed a dui. Quisque urna nulla, tempor sit amet dolor ut, eleifend porta sapien. Donec at nibh ut augue ornare condimentum nec id dolor.</p>
  <button id="fecharModal" onclick="javascript:fecharModal();">Fechar Modal</button>
</div>

O onclick serve para indicar ao botão o que ele deve fazer quando for clicado, um chama a função para abrir e o outro para fechar o modal. Agora o seu modal já deve estar totalmente pronta, você pode testar o código que construimos utilizando o codepen abaixo.

0

Deixa nos comentários abaixo qualquer dúvida o sua opinião sobre o post, em breve farei uma parte 2 para este post explicando como fazer animações e deixar nossa modal mais moderna e profissional.

MarcelloRuoppolo.com © 2008 - 2019