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'));