Click outside div to hide div in pure JavaScript

Question

I want to make a popup that should appear once a button is clicked and disappear once the user clicks outside of the box.

I\'m not sure how to make the div disappear

Answer 1

Okay, here's a jQuery based solution based on any div clicked within the DOM.

$('div').on('click', function(e){
    var parents = $(e.currentTarget).parents();
    for (var i = 0; i < parents.length; i++) {
        if (parents[i].id === 'divToHide' || e.currentTarget.id === 'divToHide') {
            // you are in the popup
        };
    }
    e.stopPropagation();
});

This looks at your current element, as well as any of the parents, and checks if the id matches up. If divToHide is in the parents() list, then you keep the popup open.

*NOTE: This requires wrapping your content within a wrapper div or something similar.