logotipo-solucion-individual-nueva-era-400-blanco
Atención Telefónica
L a V de 9:00 a 14:00 y de 17:00 a 19:00 - Excepto Festivos

Abrir una Modal PopUp con Bricks Builder para WordPress

Índice de Contenido

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

Loading

avatar solind
Antonio Fernández
Apasionado por la creación de experiencias digitales. Mi objetivo es potenciar la presencia en Internet de Empresas y Marcas, mejorando su visibilidad en el mundo digital. [CEO de Solución Individual®] [SEO] [WordPress Expert]
Comparte en tus Redes Sociales:
¿Quieres Hacer una Factura en PDF sin complicarte con un programa de contabilidad?
redes sociales logo hacer facturaQuiero Verlo
¿Necesitas Textos Legales para tu Página Web o Tienda Online?
logo imasitioplus Textos Legales

Adapta fácilmente los Textos Legales para que tu Página Web cumpla con la LOPD (Ley Orgánica de protección de Datos), RGPD, LOPDGDD y LSSICE

Quiero Verlo
¿Necesitas Hosting para WordPress?
PULSA AQUÍ
banner-viajetravel-350px
foto-whatsApp

Cristina

Consultora Soluciones Digitales

03/12/2024

¿En qué puedo ayudarte?

Soy Cristina 😀 consultora de Solución Individual. Para iniciar Chat PULSA AQUÍ

19:09 ✔

¿Te interesa un Hosting Específico para WordPress?

✅ Obtén un Hosting Profesional de alta calidad para WordPress sin sacrificar tu bolsillo. Pulsa Aquí para ver más Info

19:09 ✔