Ventanas modales HTML CSS animadas
Esta colección de ventanas modales permiten hacerlas aparecer con efectos de animación realizados con HTML y CSS, solo usan Javascript para el botón de cierre.
Con el código de cada ventana verás los scripts necesarios para abrir o cerrar este tipo de ventanas. Te los resumo aquí, incluyendo el cierre al clickar fuera de la vetana modal
// Abrir ventana modal con id = modal y un botón con id open-modal
// conteniendo un botón con class close
let open = document.getElementById('open-modal');
let modal = document.getElementById('modal');
let close = modal.querySelector('.close')
open.addEventListener('click',() => modal.classList.add('active');
close.addEventListener('click', () => modal.classList.remove('active');
//Cierra al clickar fuera de la ventana
modal.addEventListener('click', ()=>modal.classList.remove('active'));
Modal 1: Zoom In
Animación de zoom y fondo translúcido.
Modal 2: Slide Down
Desliza desde arriba, fondo oscuro.
Modal 3: Flip Y
Animación flip en eje Y, borde verde.
Modal 4: Skew & Rotate
Animación de rotación y borde naranja.
Modal 5: Gradient Slide Up
Fondo degradado y animación desde abajo.
Modal 6: Circular
Modal circular con animación de escala.
Modal 7: Bottom Sheet
Desliza desde abajo, como un "bottom sheet".
Modal 8: Blur In
Entrada con desenfoque y sombra.
Modal 9: Pulse Shadow
Animación de sombra pulsante y borde viovara.
Modal 10: Slide Left
Animación de entrada desde la izquierda, borde amarillo.
Modal 11: Rotate & Scale
Animación de rotación y escala, borde verde azulado.
Modal 12: Bounce Down
Animación de rebote y borde rosa.