Skip to content

Instantly share code, notes, and snippets.

@devzakir

devzakir/vanilla-javascript-open-close-modal.js

Created March 23, 2022 13:59
Show Gist options
  • Save devzakir/f72c9cac1e28e24ac8983f6f5bb99487 to your computer and use it in GitHub Desktop.
Save devzakir/f72c9cac1e28e24ac8983f6f5bb99487 to your computer and use it in GitHub Desktop.
Download ZIP
Open and Close Modal Vanilla JS
Raw
vanilla-javascript-open-close-modal.js
// Example
const button = document.querySelector('#showHiddenMenuTwo')
const box = document.querySelector('#hiddenWidgetTwo');
const toggle = event => {
event.stopPropagation();
if (!event.target.closest('#hiddenWidgetTwo')) {
// box.classList.toggle('active');
box.style.display = box.style.display == 'block' ? 'none' : 'block'
// box.classList.contains('active') ? document.addEventListener('click', toggle) : document.removeEventListener('click', toggle);
box.style.display == 'block' ? document.addEventListener('click', toggle) : document.removeEventListener('click', toggle);
} else {
console.log('Click inside');
}
}
button.addEventListener('click', toggle);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment