post

Janela Modal (Popup) com HTML, CSS e JS simplificado

Publicado em: 15/01/2024

Categorias: BlogCSSHTMLJavaScriptJS

Se você precisa adicionar um modal em sua pagina online, este código pode lhe ajudar. É um código bem simples que vou mostrar logo abaixo como adicionar, e também, vou mostrar como personalizar.

Primeiramente precisamos adicionar em nosso site, o código padrão, que é composto por HTML e JS, que não vai mudar, e um pouco de CSS para estilizar.

Segue código abaixo:

<!-- CODIGO PADRÃO -->
<div id="overlay" onclick="closeModal()">
    <div id="modal" onclick="event.stopPropagation();">
        <span class="modal-close" onclick="closeModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
        <div id="modal-content"></div>
    </div>
</div>

<style>  
  #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      align-items: center;
      justify-content: center;
  }
  
  #modal {
      display: none;
      background: #fff;
      padding: 32px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      position: relative;
      width: 850px;
      z-index: 99;
  }
  
  .modal-close {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      color: #555;
  }

  #modal-content h4 {
      margin-top: 0;
      font-size: 32px;
      margin-bottom: 24px;
  }

  #modal-content p {
      font-size: 18px;
      line-height: 1.4em;
  }

  .modal-close {
      background: #03738c;
      padding: 8px;
      border-radius: 8px;
      color: #fff;
      display: flex;
  }

  .modal-close:hover {
      background: #2899b3;
      transform: scale(1.2);
      transition: all linear 0.2s;
  }
</style>

<script>
    function openModal(itemId, event) {
        event.preventDefault();
        var modalContent = document.getElementById("modal-content");
        var itemContent = document.getElementById(itemId).innerHTML;
        modalContent.innerHTML = itemContent;
        document.getElementById("overlay").style.display = "flex";
        document.getElementById("modal").style.display = "block";
    }

    function closeModal() {
        document.getElementById("overlay").style.display = "none";
        document.getElementById("modal").style.display = "none";
    }
</script>
<!-- CODIGO PADRÃO -->

O código acima pode ser adicionado apenas na pagina que deseja abrir o modal ou pode ser adicionado no rodapé do site, para ser carregado em todas as paginas, assim, sempre que precisar adicionar um modal customizado, ele já vai ser carregado.

O código acima funciona basicamente para criar nossa estrutura padrão, pois o conteúdo vamos criar logo a seguir.

No exemplo abaixo, preciso criar um botão (que vai ser clicado para exibir o modal), e o conteúdo do modal (que será carregado via JS).

Segue abaixo um exemplo:

<a href="#" onclick="openModal('item1', event)">Abrir janela 1</a>

<div id="item1" class="item-content" style="display: none;">
  <h4>Titulo da janela 1</h4>
  <p>Texto da janela 1.</p>
</div>

Como todo o conteúdo é carregado via javascript, posso criar quantos modais eu quiser, apenas criando um botão e a div de conteúdo, exemplo:

<a href="#" onclick="openModal('item2', event)">Abrir janela 2</a>

<div id="item2" class="item-content" style="display: none;">
  <h4>Titulo da janela 2</h4>
  <p>Texto da janela 2.</p>
</div>

<a href="#" onclick="openModal('item3', event)">Abrir janela 3</a>

<div id="item3" class="item-content" style="display: none;">
  <h4>Titulo da janela 3</h4>
  <p>Texto da janela 3.</p>
</div>

Apenas preciso trocar o identificador único no botão em onclick="openModal('item3', event)" e no ID da div (id="item3"). Pois assim, estou associando o botão ao conteúdo.

Exemplo funcional completo:

Abaixo, tenho um exemplo de uma listagem que funciona como “perguntas frequentes” que usa esse modal, porem com alguns estilos a mais. Veja abaixo:

<!-- CONTEUDO -->
<ul class="lista-perguntas">
  <li><a href="#" onclick="openModal('item1', event)"><span class="texto">Primeira duvida?</span> <span class="icone"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg></span> </a></li>
  <li><a href="#" onclick="openModal('item2', event)"><span class="texto">Segunda duvida?</span> <span class="icone"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a1 1 0 0 1 1 1v14a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1Z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg></span> </a></li>
</ul>

<div id="item1" class="item-content" style="display: none;">
  <h4>Primeira duvida?</h4>
  <p>Primeiro texto do modal.</p>
</div>

<div id="item2" class="item-content" style="display: none;">
  <h4>Segunda duvida?</h4>
  <p>Segundo texto do modal.</p>
</div>
<!-- CONTEUDO -->


<!-- ESTILO PERSONALIZADO -->
<style>
  body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #fff;
  }
  
  .lista-perguntas li {
      list-style: none;
  }

  .lista-perguntas a {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 18px 24px;
      background: #03738c;
      font-size: 24px;
      border-radius: 12px;
      align-items: center;
      text-decoration: none;
      color: #fff;
      transition: all linear 0.2s;
  }

  .lista-perguntas a:hover {
      transform: scale(1.02);
      transition: all linear 0.2s;
      background: #2899b3;
  }

  ul.lista-perguntas {
      margin: 0;
      padding: 0;
      display: flex;
      gap: 24px;
      flex-direction: column;
  }

  .lista-perguntas .icone {
      background: #03738c;
      padding: 10px;
      border-radius: 8px;
      display: flex;
  }
</style>
<!-- ESTILO PERSONALIZADO -->


<!-- CODIGO PADRÃO -->
<div id="overlay" onclick="closeModal()">
    <div id="modal" onclick="event.stopPropagation();">
        <span class="modal-close" onclick="closeModal()"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
        <div id="modal-content"></div>
    </div>
</div>

<style>  
  #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      align-items: center;
      justify-content: center;
  }
  
  #modal {
      display: none;
      background: #fff;
      padding: 32px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      position: relative;
      width: 850px;
      z-index: 99;
  }
  
  .modal-close {
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 20px;
      color: #555;
  }

  #modal-content h4 {
      margin-top: 0;
      font-size: 32px;
      margin-bottom: 24px;
  }

  #modal-content p {
      font-size: 18px;
      line-height: 1.4em;
  }

  .modal-close {
      background: #03738c;
      padding: 8px;
      border-radius: 8px;
      color: #fff;
      display: flex;
  }

  .modal-close:hover {
      background: #2899b3;
      transform: scale(1.2);
      transition: all linear 0.2s;
  }
</style>

<script>
    function openModal(itemId, event) {
        event.preventDefault();
        var modalContent = document.getElementById("modal-content");
        var itemContent = document.getElementById(itemId).innerHTML;
        modalContent.innerHTML = itemContent;
        document.getElementById("overlay").style.display = "flex";
        document.getElementById("modal").style.display = "block";
    }

    function closeModal() {
        document.getElementById("overlay").style.display = "none";
        document.getElementById("modal").style.display = "none";
    }
</script>
<!-- CODIGO PADRÃO -->


Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/4160

ID de Referência: 4160

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários