Modal (how it works)

• Modals are built with HTML, CSS, and JavaScript. They’re positioned (fixed) over everything else in the document and remove scroll from the body so that modal content scrolls instead.


• Clicking the transparent background will automatically close the modal.

The JavaScript

    
        const modalTrigger = document.querySelector('.modal-trigger');
        const modal = document.querySelector('.modal');
        
        //open modal
        modalTrigger.addEventListener('click', () => {
            modal.classList.add('modal-is-active')
        })
        
        window.addEventListener('click', closeModal); //close modal
        
        //close modal function
        function closeModal(e){
            if(e.target == modal){
                modal.classList.remove('modal-is-active')
            }
        }