post #7861
Código Popup para Abrir Automaticamente ao Carregar a Página
Publicado em: 11/03/2026 / Atualizado em: 11/03/2026
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:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=7861
ID de Referência: 7861
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.