popup desplegable elat2026
<!-- Overlay (fondo oscuro) -->
<div id="popup-elat-overlay" style="
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.7);
z-index: 9998;
justify-content: center;
align-items: center;
">
<!-- Contenedor de la imagen -->
<div style="
position: relative;
max-width: 90%;
max-height: 90%;
background: #fff;
padding: 8px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
">
<!-- Botón de cierre -->
<span onclick="document.getElementById('popup-elat-overlay').style.display='none'" style="
position: absolute;
top: -12px; right: -12px;
background: #c00;
color: #fff;
border-radius: 50%;
width: 28px; height: 28px;
text-align: center;
line-height: 28px;
font-weight: bold;
cursor: pointer;
font-family: sans-serif;
font-size: 16px;
">✕</span>
<!-- Enlace a la noticia del ELAT -->
<a href="https://www.agal.cl/noticias/xx-elat-2026" target="_blank">
<img src="https://www.agal.cl/afiche-elat" alt="XX ELAT 2026 - Valparaíso, 6 y 7 de noviembre" style="
display: block;
max-width: 100%;
height: auto;
border-radius: 4px;
cursor: pointer;
">
</a>
</div>
</div>
<!-- Script para mostrar el popup al cargar la página -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Mostrar después de 1.5 segundos (opcional)
setTimeout(function() {
var overlay = document.getElementById('popup-elat-overlay');
if (overlay) {
overlay.style.display = 'flex';
}
}, 1500);
// Cerrar al hacer clic fuera de la imagen (en el fondo oscuro)
document.getElementById('popup-elat-overlay').addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
}
});
});
</script>
