Hola en este tutorial gratuito aprenderás a crear un modal o pop up animado con transiciones CSS a pantalla completa con y divi y sin plugins.
Para realizar este tutorial nos vamos a apoyar de una librería jQuery gratuita llamada animatedModal.js, no te preocupes yo te enseñaré paso a paso cómo integrar esta librería con divi de forma muy fácil.
En su momento pensé que este tutorial debería ser un tutorial premium, pero cómo me gusta compartir contenido de calidad también en el canal de youtube he decidido que este tutorial sea completamente gratuito y de esta manera exigirme más para seguir creando contenido único y exclusivo en los tutoriales exclusivos de la Academia OV DIVI.
Si al final tienes alguna duda sobre este tutorial ya sabes que puedes dejarme un comentario ya sea en esta entrada o en los comentarios de youtube, leo todo y trato de responder cada uno de sus mensajes. También ya sabes que puedes darle manita arriba si este tutorial te ha gustado y suscribirte al canal de youtube si no lo has hecho.
Para realizar este tutorial vamos a necesitar de unos fragmentos de código que te dejo a continuación:
Primero debemos integrar Animate CSS que es una librería para activar las animaciones en el modal:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
Posteriormente necesitamos integrar unos scripts para sincronizar e inicializar animateModal.js con divi:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/animatedModal.min.js"></script> <script> jQuery(document).ready(function($){ //demo 01 $("#demo01").animatedModal({ modalTarget: 'abrirModal-1', animatedIn: 'zoomIn', animatedOut: 'zoomOut', }); }); </script>
Para agregar el icono de cerrar al modal debemos hacerlo a través de un módulo anuncio y debemos colocarle el siguiente nombre de clase:
close-nombreSeccionModal
Hasta este punto ya debe funcionar el modal, pero si tienes problemas con el posicionamiento en Z debemos usar los siguientes fragmentos de código para que la sección del modal se coloque por encima del header y footer:
Estilos CSS:
#main-content.ov-modal .et_builder_inner_content {
z-index: 99999 !important;
}
footer .et_builder_inner_content {
z-index: 0;
}
jQuery:
<script>
jQuery(document).ready(function($){
$(".btn-ov-modal").click(function(){
$("#main-content").addClass("ov-modal");
});
$(".cerrar-ov-modal").click(function(){
$("#main-content").removeClass("ov-modal");
});
});
</script>
Y esto es todo, para que sepas cómo tienes que insertar los fragmentos de código anteriores solo tienes que darle play al video.
Hola Oscar!! espero vaya todo bien. Una duda, cuando integras los scripts en módulo código, también se podrían integrar en la configuración de la página?
Habría también la opción de meterlos en integraciones divi?
gracias de antemano,
abrazo
Hola Rubén qué tal, si quisieras integrarlo de forma más manual por así decirlo, debería realizarse a través de un tema hijo. Si es código JavaScript debe ir en un archivo JS de tu tema hijo, si son funciones debe ir en functions.php, si son estilos debe ir en styles.css
Buenas tardes oscar, felicidades por tus tutoriales, creo que volveré a suscribirme a los premium, consulta, es posible que el botón de abrir el modal sea un anuncio y al darle click en la imagen abra el modal?
Ps: lo logre ponerlo en el botón insertando el código pero mis jefes quieren que funcione al darle click en la imagen 🙁
Hola Sebastian, muchas gracias.
Sobre tu consulta tendría que realizar mis pruebas, no estoy seguro que pueda ser posible porque los enlaces de los módulos divi los incrusta a través de JavaScript y es allí dónde puede haber conflictos.
Si quieres escríbeme por messenger y con gusto hacemos pruebas en tu web.
Saludos.
Hola Oscar, aprovechando el comentario de Sebastian, me surge la misma duda. ¿Es posible colocar el modal dentro de un anuncio? He buscado varios tutoriales, pero no encuentro esta posibilidad.
Muchas gracias por todos tus tutoriales, me han ayudado mucho.
Por la forma en que inserta el enlace divi en los módulos no es posible 🙁
Pero puedes usar el plugin Popups for Divi 🙂 es bueno y funciona genial.
Hola Oscar, estupendo tutorial, como siempre!
He seguido todos los pasos, pero el botón activador lo he puesto en el pie de página y funciona perfecto, salvo un pequeño problema, no me deja clicar sobre ningún elemento (imagen, enlaces, etc.) que esté fuera del pie de página…. ¿Alguna idea de cómo solucionarlo?
Gracias de antemano
Hola Larry, apenas te ando leyendo por aquí, pero lo solucionamos por messenger 🙂
Aquí comparto la solución por si alguien más la necesita:
1. Coloca este código en el CSS Personalizado:
#abrirModal-1 { visibility: hidden; } .modal-visible { visibility: visible !important; }2. En un módulo código inserta esto:
<script> jQuery(document).ready(function($){ $("#popup").click(function(){ $("#abrirModal-1").addClass("modal-visible"); }); $(".close-abrirModal-1").click(function(){ $("#abrirModal-1").removeClass("modal-visible"); }); }); </script>Buenas tardes Oscar, muchas gracias por tus tutoriales, te hago una consulta, hay alguna posibilidad que en vez de dar click en un botón el modal se cargue automáticamente pasado unos segundos, gracias de antemano por tu respuesta. Saludos.
Hola José, no es posible con este modal amigo. Pero puedes probar este plugin gratuito para realizarlo. O si quieres uno premium te recomiendo Divi Overlays.
Buenas Oscar!
Antes que nada, GRACIAS, porque has sido un excelente tutor desde que comencé este camino de desarrollo web en Divi, gran parte de mi trabajo te lo debo a vos, debo reconocerlo.
Estoy intentando normalizar mis finanzas para poder suscribirme mensualmente (ya que aquí en Argentina se aplica un impuesto importante a las compras en dólares), pero estimo que para agosto ya sea un nuevo miembro de tu comunidad premium! Aún así, gracias por todos esos tips, consejos y tutoriales gratuitos que has aportado.
Respecto a ésta práctica, antes utilizaba un complemento que no era muy eficiente en cuanto a velocidad… era muy muy lento, y ésto, esto es la gloria hermano!
Pero tengo problemita específico que no termino de comprender porqué es…
Cuando ejecuto el botón y se abre el popup, mientras se está abriendo, la página se va desplazando hacia la mitad de la página. Y mi intención es que el popup se abra exactamente en la posición en donde está el botón (ya que el fondo tiene una transparencia con blur)
Tal vez tengas una idea de lo que pueda ser… Te agradecería me ilumines.
Puedo enviarte el enlace por privado en caso de que necesites darle una mirada.
Abrazo hermano, y nuevamente GRACIAS! Eres un crack.
Perdón, me precipité a comentar jaja! Ya lo resolví cambiando la animación de entrada… Estaba utilizando fadeInUp y la cambié por slideInUp. Pero ahora la animación de entrada no se ejecuta… simplemente aparece el popup. Intentaré jugando con otras animaciones y luego te cuento que tal me ha ido.
Saludos hermano!
Hola Mandinga muchas gracias por las palabras.
No te preocupes los tutoriales estarán allí el día que los necesites. Entiendo la situación que vive Argentina ya que tengo suscriptores y amigos que son de allá y me han comentado la situación, una pena 😔 Espero pronto mejore. Mientras seguiré compartiendo más y más contenido gratuito, que seguro te seguirá siendo de ayuda. 😃
Sobre el problema que me comentas que genial que lograste encontrar una solución, seguro le servirá a más de uno. Gracias por compartirla.
Te mando un abrazo hasta Argentina ¡Saludos!
Hola, tengo un problema y es que cuando muestro el modal se muestra detrás de los elementos de la pagina. ¿Cómo puedo resolver eso?
Hola Juan, sube el z-index o indice Z de la sección desde los ajustes de la sección > Avanzado > Puesto…
Tienes el JSON de este video ?
Hola Carlos, lamentablemente perdí todos mis json de los tutoriales gratuitos :/
Hola Óscar! se puede integrar la librería en otro sitio que no sea el head? es que me esta creando un conflicto con el modulo deslizante de anchura completa. El caso es que cuando inserto la librería me desaparecen las letras del modulo deslizante. No lo entiendo y necesito poner ese modal (no para mi si no para la web de una clienta). ¿Alguna idea de porque puede estar sucediendo esto? muchas gracias de antemano!
Hola Raquel, ¿Cómo en otro sitio que no sea el head? 🤔 la librería puede integrarse en cualquier parte de la web y en cualquier página.
No sé que problema estás teniendo. Si tienes la url de tu ejercicio compártemela para inspeccionarlo.
Saludos.
hola oscar disculpa una pregunta ya ise todo los pasos pero mis botones solo bajan hacia donde esta mi informacion como ancla
Hola Oswaldo ¿Cuál es la url de tu ejercicio?
Tengo el mismo problema, además, no me permite hacer clic en varias partes del sitio, aprox la mitad de la pantalla. ¿Encontraste solución?
En mi caso la url es: http://www.carnezmex.com
Cabe aclarar no está terminado ya que me gustaría resolver primero el tema del menu y carrito😅
Hola Alejandro, te recomiendo utilizar esta configuración en divi performance…
Hola Oscar,
Como siempre genial! Lo que hay animaciones que no las hace. Puede ser porque el CDN no está cogiendo la versión actualizada?
La verdad es que me gustaría hacer la animación «slideInRight» pero no funciona.
¿Podrías ayudarme?
Guille, no sé a qué se deba, no sé si no sean compatibles algunas animaciones o es un error de la librería.
Hola! Veo que este tutorial es del año pasado, intento integrarlo en 2022 siguiendo los mismos pasos pero al momento de presionar los botones sólo se mueve la página, cómo si fuera un efecto de scroll hacia abajo, pero no aparece la sección que usé como modal ¿Hay algo como alguna de las clases o alguno de los scripts que deba actualizar?
Muchas gracias de antemano 😀
Hola Alejandro, todos mis tutoriales siguen funcionando solamente que en las versiones recientes de divi es recomendable utilizar esta configuración en Divi Performance…
Hola Oscar!! Estoy viendo este tutorial, realice todos los pasos, pero al dar clic en el botón no me sale la pantalla modal, espero me puedas ayudar para saber que estoy haciendo mal.
Hola Areli, primero asegúrate que tengas esta configuración en divi performance.
Si después de tener esa configuración el problema persiste, me compartes la url de tu web para inspeccionarla.
Saludos