How can I hide a div when clicking out of it with javascript (without JQuery)?

Question

I have been trying to make a div ("aside") show when I click on a button, then hide when I click out of the div, but my code simply hides it instantly when I click the button.

Here is the HTML:

<aside id="modal_champion" style="display: none;">
    <div id="modal_champion_wrapper">
       <div id="champion_loading_screen">
            <img loading="lazy" id="champion_loading_screen_image">
            <figcaption id="champion_loading_screen_infos">
                <span id="champion_loading_screen_name"></span>
                <span id="champion_loading_screen_title"></span>
            </figcaption>
        </div>
        <button id="modal_close">×</button>
    </div>
</aside>

And the Javascript:

async function open_modal() {

    /* Some code above...*/

    // Close modal by clicking out of it
    window.addEventListener('click', function (e) {
        if (!document.getElementById('modal_champion_wrapper').contains(e.target)) {
            console.log('HIDE!')
            return document.getElementById('modal_champion').style.display = 'none';
        }
    });
}

To see it without downloading the project, you can see the website on GitHub or on this environment.

Looks like a similar issue to [Modal not closing when I click X or outside](https://stackoverflow.com/a/65892081/4642212). Combine all event listeners that close or open modals into one; you don’t want multiple click listeners running successively, but independently. — Sebastian Simon, Apr 06 '21 at 13:10

Scott Marcus · Answer 1 · 2021-04-06T13:18:04.943

Just set up a document.click event handler and in that handler see if it wasn't the modal that was the originator of the event.

const aside = document.getElementById("modal_champion");

// Close modal by clicking out of it
document.addEventListener('click', function (e) {
  // If the originator of the event wasn't the modal and the modal isn't hidden
  if (!e.target.closest("aside") && !aside.classList.contains("hidden")){
    aside.classList.add("hidden"); // Hide it.
  }
});

.hidden { display:none; }
aside { background-color:#e0e0e0; }

<p>Other parts of the document</p>
<aside id="modal_champion"> <!-- add class="hidden" if you want it initially hidden  -->
    <div id="modal_champion_wrapper">
       <div id="champion_loading_screen">
            <img loading="lazy" id="champion_loading_screen_image">
            <figcaption id="champion_loading_screen_infos">
                <span id="champion_loading_screen_name"></span>
                <span id="champion_loading_screen_title"></span>
            </figcaption>
        </div>
        <button id="modal_close">×</button>
    </div>
</aside>

score 0 · Accepted Answer · answered Apr 06 '21 at 13:18

Try like this.

window.addEventListener('click', function (e) {
        if(document.getElementById('modal_champion_wrapper').contains(e.target)){
            return;
        }
        if (document.getElementById('modal_champion').contains(e.target)) {
            console.log('HIDE!')
            return document.getElementById('modal_champion').style.display = 'none';
        }
    });

How can I hide a div when clicking out of it with javascript (without JQuery)?

2 Answers2