Abrir una Modal PopUp con Bricks Builder para WordPress

  • Comentarios de la entrada:Sin comentarios
  • Tiempo de lectura:3 minutos de lectura

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.

Quiero Descargar Bricks

 

No olvides suscribirte a mi canal de Youtube

suscribete youtube


Comparte en tus Redes Sociales:

Deja una respuesta

Los datos de carácter personal que consten en el comentario serán tratados por Solución Individual con la finalidad de publicar tu comentario así como enviarte a posteriori información comercial de aquellos productos o servicios que puedan ser de tu interés. La legitimación del tratamiento es tu consentimiento. Tus datos no serán cedidos a terceros. Tienes derecho a acceder, rectificar y suprimir tus datos, así como otros derechos como se explica en nuestra Política de Privacidad y Protección de datos