En este artículo te voy a mostrar cómo se puede programar de manera sencilla una Modal PopUp en el constructor Bricks para WordPress. Para ello utilizaremos un pequeño código en JavaScript y unas clases CSS que incluiremos en la configuración de la página donde queremos que se abra el PopUp. Hasta la fecha en la versión Bricks 1.4.0.2 y Bricks 1.5 (BETA) no incorpora ningún elemento que abra una PopUp.
El código JavaScript que tenéis que poner es este que detallo a continuación. Aunque en el vídeo está explicado dónde hay que ponerlo, recordar que es en Ajustes de la Página (Rueda dentada) -> Configuración de Página -> Código personalizado en el campo Scripts del cuerpo (pie de página).
<script>
const open = document.getElementById('abrirPopUp');
const modal_container = document.getElementById('modal_container_PopUp');
const close = document.getElementById('cierraPopUp');
open.addEventListener('click', () => {
modal_container.classList.add('showPopUp');
});
close.addEventListener('click', () => {
modal_container.classList.remove('showPopUp');
});
</script>
También incluir en Ajustes de la Página en el campo CSS personalizado el código:
.modal-container-PopUp {
display: flex;
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
position: fixed;
pointer-e1ents: none;
opacity: 0;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
transition: opacity 0.3s ease;
}
.showPopUp {
pointer-events: auto;
opacity: 1;
}
#cierraPopUp {
cursor:pointer;
}
#abrirPopUp {
cursor:pointer;
}
Como explico en el vídeo, definimos una estructura de Sección -> Contenedor -> Elementos (Icono, Texto y Botón)
A la Sección le aplicaremos la clase modal-container-PopUp y el ID modal_container_PopUp
Al Botón de Cerrar le aplicamos el ID cierraPopUp
Al texto que hará de enlace y abrirá la PopUP le aplicamos el ID abrirPopUp
Si necesitas el Tema Bricks para tu página Web, puedes descargarlo a un precio competitivo y con 1 año de actualizaciones, desde La Caja de Experiencia.
No olvides suscribirte a mi canal de Youtube
