Cerrar video

Cómo crear un modal (pop up) animado a pantalla completa con divi y sin plugins

por | Ene 26, 2021 | Tutorial gratuito | 23 Comentarios

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.

Tutoriales Relacionados

23 Comentarios

  1. ruben

    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

    Responder
    • Oscar Viedma

      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

      Responder
  2. Sebastian

    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 🙁

    Responder
    • Oscar Viedma

      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.

      Responder
      • Isis Hernández

        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.

        Responder
  3. Larry

    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

    Responder
    • Oscar Viedma

      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>
      
      Responder
  4. José

    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.

    Responder
  5. Mandinga

    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.

    Responder
    • Mandinga

      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!

      Responder
      • Oscar Viedma

        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!

        Responder
  6. Juan

    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?

    Responder
    • Oscar Viedma

      Hola Juan, sube el z-index o indice Z de la sección desde los ajustes de la sección > Avanzado > Puesto…

      Responder
  7. Carlos Alberto

    Tienes el JSON de este video ?

    Responder
    • Oscar Viedma

      Hola Carlos, lamentablemente perdí todos mis json de los tutoriales gratuitos :/

      Responder
  8. Raquel

    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!

    Responder
    • Oscar Viedma

      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.

      Responder
  9. oswaldo

    hola oscar disculpa una pregunta ya ise todo los pasos pero mis botones solo bajan hacia donde esta mi informacion como ancla

    Responder
  10. Guille

    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?

    Responder
    • Oscar Viedma

      Guille, no sé a qué se deba, no sé si no sean compatibles algunas animaciones o es un error de la librería.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest