jQuery Show/Hide on outside click + button

Question

For my show/hide div I only want it to close when the user clicks outside the area or else on the close button, currently it closes regardless of whether you click inside or out, which also means you can't click the link inside of the div.

$('#see').click(function(e){
 $('.overlaybox').show("slide", { direction: "right"  }, 500);
    e.stopPropagation();
});

$(document).click(function(){
 $('.overlaybox').hide("slide", { direction: "right"  }, 500);
});

jsfiddle

http://stackoverflow.com/questions/11545518/hide-a-div-when-clicked-outside-of-it Refer this — akhil viswam, Jun 10 '16 at 10:44

Sooraj · Accepted Answer · 2016-06-10T10:29:09.530

You need to check whether the clicked element is the target element or not. If not you can hide the target element. Else skip it. Following code will help

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

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

.overlaybox{
height:100px;
  width:100px;
  background:teal;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="overlaybox">
  </div>

Here is the updated fiddle of your code - https://jsfiddle.net/etmf4s2f/6/

jQuery Show/Hide on outside click + button

1 Answers1