Onclick Outside of the div hide div

Question

i need in jquery it is simple for experience. i opened a pop-up on click on a div but i want to hide it on click out-side of the the div. now it is hiding only when i click on close button. The close is

<a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a>

and the div is

<div id="blanket" style="display:none;"><a class="close-up" href="#" onclick="popup('popUpDiv')" >X</a></div>
<div id="popUpDiv" style="display:none;">  <div class="main-navBar">kfbkasfkafkja</div> </div>

please help in it Thanks in advance.....

please visit http://demo.reservestep.com/Bahou/contact/# and click on menu link you will understand it is also hiding when i click on menu link @pschueller — Reserve Step, Apr 04 '15 at 14:52

score 2 · Answer 1 · answered Apr 04 '15 at 15:19

Try this:

$(document).mouseup(function (event)
{
    var container = $("#popUpDiv");

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

Jon Doe · Answer 2 · 2015-04-15T03:21:22.713

Here is an example I built using jQuery. Rather then watching everything outside of a div it adds a blanket and waits for the user to click that. What you are looking for is very similar to Bootstrap's modals.

$('#open-popup').click(function() {
  $('#popup').show();
});

$('.popup_wrap .blanket').click(function() {
  $(this).parent().fadeOut(100);
});

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
.popup_wrap{
  display: none;
}
.popup_wrap,
.blanket {
  height: 100%;
  width: 100%;
  position: absolute;
}
.blanket {
  z-index: 1000;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup {
  z-index: 1001;
  display: inline-block;
  position: absolute;
  background-color: #fff;
  width: 50%;
  margin: 50px 25% 0 25%;
  padding: 5px;
}
.fake-link{
  text-decoration: underline;
  cursor: pointer;
}

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

<div id='popup' class='popup_wrap'>
  <div class='popup'>
    Some text...
  </div>
  <div class='blanket'></div>
</div>

<span id='open-popup' class='fake-link'>Open Popup</span>

Onclick Outside of the div hide div

2 Answers2