Hide a div when clicked outside of it

user_1360853 0
Viewed 86747

This question has been asked multiple times, however none of the answers seem to work for me.

The css of the div is as follows:

#info{
  display: none;
  position: fixed;
  z-index: 500;
  height: 50%;
  width: 60%;
  overflow: auto;
  background: rgba(187, 187, 187, .8);
}

I tried to use the following code:

$("#info").click(function(e){
  e.stopPropagation();
});

$(document).click(function(){
  $("#info").hide();
});

as well as this code:

$(document).mouseup(function (e){
    var container = $("#info");

    if (container.has(e.target).length === 0) {
        container.hide();
    }
});

Yet whenever i click on the div it also disappears, no clue why but it does.
Any thing else that might work?

onclick hide html jquery
7 Answers

A solution with plain JavaScript, without need of JQuery:

const hide = (elem) => {
    elem.style.display = 'none';
};

document.addEventListener('click', (event) => {
  const menuContainer = document.getElementById('menuContainer');
  if (!menu.contains((event.target))) {
    hide(menuContainer)
  }
});
user_62813760

Try the below solution. It's even working recursive:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Reference - https://stackoverflow.com/a/7385673/3910232

user_39102320
Related