Last active
November 30, 2020 21:39
-
-
Save giventofly/48163804a4b15bb75f9d133269e8e886 to your computer and use it in GitHub Desktop.
javascript click modal on outside click
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//asume all modals have class modal and are closed by removing the class open. | |
//close open modal on outside click | |
const clickOutSideModal = (e)=>{ | |
let current = e.target; | |
let insideModal = false; | |
while(current.parentNode && !insideModal && current.parentNode.tagName != 'BODY'){ | |
if(current.parentNode.classList.contains('modal')){ | |
insideModal = true; | |
} | |
current = current.parentNode; | |
} | |
if(!insideModal){ closeOpenModals();} | |
} | |
//close modal | |
const closeOpenModals = ()=>{ | |
[...document.querySelectorAll('.modal')].forEach(modal=>{ | |
modal.classList.remove('open'); | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment