Esta es una forma sencilla y super practica de crear un Popup con codigo y sin necesidad de plugin, para iniciar vamos a tener estos pasos solo de copiar y pegar
- Agregaremos el script personalizado en nuestro DIVI
- Agregamos el CSS personalizado
- Creamos un botón que active el Popup y agregamos la clase lightbox-trigger-element
- Creamos el contenido emergente de DIVI ya sea sección, fila o módulo y agregamos la clase lightbox-content-element
PASO UNO: Agregamos el script personalizado
Dirígete a DIVI en la sección de Integración y vamos a “Agregar código al <head> de su blog” donde copiamos y pegamos el siguiente codigo
<script type="text/javascript"> jQuery(document).ready(function(t){t('div:not(.et_mobile_menu) .lightbox-content, div:not(.et_mobile_menu) [class*="lightbox-content-"]').addClass("mfp-hide"),t("div:not(.et_mobile_menu) .lightbox-trigger").magnificPopup({items:{src:"div:not(.et_mobile_menu) .lightbox-content",type:"inline"}}),t('div:not(.et_mobile_menu) [class*="lightbox-trigger-"]').each(function(){var i=".lightbox-content-"+Array.prototype.find.call(this.classList,function(t){return t.indexOf("lightbox-trigger-")>-1}).split("lightbox-trigger-")[1];t(this).magnificPopup({items:{src:i,type:"inline"}})}),t(this).click(function(){t(".mfp-wrap").attr("id","et-boc")}),t('[class*="lightbox-content"]').prepend('<div class="lightbox-overlay"></div>')});</script>
<script src="/wp-content/themes/Divi/includes/builder/feature/dynamic-assets/assets/js/magnific-popup.js" async></script>
<link rel="stylesheet" href="wp-content/themes/Divi/includes/builder/styles/magnific_popup.css">
PASO DOS: Agregamos el CSS personalizado
Dirígete a DIVI en la sección “General” y bajamos hasta “CSS personalizado” donde copiamos y pegamos el siguiente código
/****** Lightbox Styling *******/
[class*="lightbox-trigger-"] {cursor:pointer;}
[class*="lightbox-content-"] {position:relative; z-index: unset !important;}
[class*="lightbox-content-"] .mfp-close {color:#999999 !important;}
[class*="lightbox-content-"] .mfp-close:active {top:0px !important;}
PASO TRES: Creamos nuestro botón disparador
Para este paso vamos a agregar el siguiente CSS al elemento ya sea un botón, imagen o sección:
lightbox-trigger- <valor>
Donde podemos reemplazar <valor> por la palabra o numero que queramos
Por ejemplo lightbox-trigger-ejemplo
PASO CUATRO: Creamos nuestro contenedor del Popup
En la misma pagina se crea el contenido de nuestro popup ya sea una imagen, formulario, sección en otras palabras lo que quieras, en donde le vamos agregar esta linea de CSS
lightbox-content- <valor>
Donde el <valor> lo vamos a reemplazar por el mismo que utilizamos en el botón disparador
Ejemplo lightbox-content-ejemplo
RECOMENDACIÓN
En las ultimas actualizaciones de DIVI creo unas opciones de bloqueo de algunas acciones para mejorar la precarga de la pagina, para que funcione bien este código te recomiendo tener esta configuración
Hola, Alejandro. Seguí los pasos y los popup funcionan bien, pero queda un espacio blanco en la página donde está ubicadas las cajas, ¿qué puedo hacer al respecto?
Hola Mónica, cuando dices cajas es el pop-up (mensaje emergente) si es asi mira bien las margenes de la caja del pop-up que sean cero o también mira el fondo de esa caja que sea transparente o que no tenga.
Saludos
Muy buen articulo y de mucho interés para cualquier proyecto, pero esteria bien que se le pudieran dar un poco más de estilos como por ej. cuando aparece y cuando desaparece…Un C. Saludo
Hola Fernando, gracias por ver el contenido, perfecto lo tendré en cuenta para los próximos videos que desarrolle. Te invito a que me sigas por youtube en https://youtube.alejandroberrio.com saludos