Cerrar video

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

por | Ene 26, 2021 | Tutorial gratuito | 2 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.

2 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

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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