Hide a div when clicked outside of it

Question

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?

Answer 1

As your target has id=info, so you can try:

$(document).click(function(e) {

  // check that your clicked
  // element has no id=info

  if( e.target.id != 'info') {
    $("#info").hide();
  }
});

You can also try:

$(document).click(function() {

  if( this.id != 'info') {
    $("#info").hide();
  }

});

According to comment

$(document).click(function(e) {

    // check that your clicked
    // element has no id=info
    // and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length) {
        $("#info").hide();
    }
});

Answer 2

To ensure you have a solution that works on iPads too, then you need to use the following function trigger instead:

$(document).on("mousedown touchstart",function(e){
  var $info = $('#info');
  if (!$info.is(e.target) && $info.has(e.target).length === 0) {
    $info.hide();
  }
});

Similarly, if you are looking to cover off mouseup, add 'touchend':

$(document).on("mouseup touchend",function(e){
  ...
});

Answer 3

Attach an onclick event handler to the document object:

$(document).click(function(e) {   
    if(e.target.id != 'info') {
        $("#info").hide();   
    } 
});

Demo: http://jsfiddle.net/aUjRG/

Here is a solution in pure JavaScript to help you better understand what it happening:

function hideInfo(){
    if(window.event.srcElement.id != 'info'){
        document.getElementById('info').style.display = 'none';
    }
}

document.onclick = hideInfo;

Demo: http://jsfiddle.net/mmzc8/

Both solutions will check if the location that the user clicked was on the element with an ID of info. Assuming that the user did not click on the info element, then hide the info element.

Answer 4

Try this code, this is the best for me.

jQuery('.button_show_container').click(function(e) {
    jQuery('.container').slideToggle('fast'); 
    e.stopPropagation();
});

jQuery(document).click(function() {
        jQuery('.container').slideUp('fast');
});

Answer 5

You can add a class only for check on mouse click that specific div or any within that div element clicked or not.

$(document).click(function(e){            
    if ( !$(e.target).hasClass("[class name for check]") &&
         $("[element class or id]").css("display")=="block" ) {
            //...code if clicked out side div
    }
});

Answer 6

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

Answer 7

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