Manu Martínez Marketing

TUTORIAL | Ventana emergente circular – Elementor PRO

¡Hey equipo! Les comparto el código CSS y el Java para sacar el efecto de la ventana emergente circular, espero les sirva.
Sí aún no tienen Elementor PRO, me ayuda bastante si adquieren la licencia con mi link de afiliado 🤜.


body:not(.elementor-editor-active) .contact-popup{
	clip-path:circle(0% at 100% 0%);
	transition: all .6s ease-in-out;
}
body:not(.elementor-editor-active) .contact-popup.open{
	clip-path:circle(100%);
}
#close-btn{
	display:none;
	cursor:pointer;
}
#close-btn.visible{
	display:block;
}

Javascript


jQuery('#open-btn').click(function(){
  setTimeout(function(){
       jQuery('.contact-popup').addClass("open");
       jQuery('#close-btn').addClass("visible");	
   }, 100)
});
jQuery('#close-btn').click(function(){
  jQuery('.contact-popup').removeClass("open");
  jQuery(this).removeClass('visible');
});

¿Necesitas ayuda con un proyecto web o de marketing digital?

Suscríbete

GoBaby quiere acompañarte en cada una de las etapas de tu bebé.

Suscríbete a nuestro newsletter.