Código Popup para Abrir Automaticamente ao Carregar a Página - Bruno Devx - BR Criativus

post #7861

Código Popup para Abrir Automaticamente ao Carregar a Página

Publicado em: 11/03/2026 / Atualizado em: 11/03/2026

Categorias: BlogCSSHTMLJavaScript (JS)JSPop-Ups

Com o código abaixo você pode implementar um Popup (modal) em seu site ou landing page que abre automaticamente ao carregar a página.

Segue código abaixo:

<!-- Popup -->
<div id="popupEvento" class="popup-overlay">
  <div class="popup-content">
    <span class="popup-close">X</span>
    
    <a href="SUA_URL" target="_blank">
      <img src="SUA_IMAGEM" alt="TITULO_DA_IMAGEM">
    </a>

  </div>
</div>

<style>
.popup-overlay {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.popup-content {
  position:relative;
}

.popup-content img {
  max-width:90vw;
  max-height:90vh;
  display:block;
}

.popup-close {
  position:absolute;
  top:-10px;
  right:-10px;
  font-size:18px;
  cursor:pointer;
  background:#fff;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function(){
  const popup = document.getElementById("popupEvento");
  const close = document.querySelector(".popup-close");

  close.addEventListener("click", function(){
    popup.style.display = "none";
  });
});
</script>

OBS: Altere o HTML para o seu.

Publicações recomendadas:



Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato