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

  • Select an option

    Learn more about clone URLs
  • Save devzakir/f72c9cac1e28e24ac8983f6f5bb99487 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save devzakir/f72c9cac1e28e24ac8983f6f5bb99487 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. devzakir created this gist Mar 23, 2022.
    20 changes: 20 additions & 0 deletions vanilla-javascript-open-close-modal.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@

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