Close a Div by Clicking Outside

Use jQuery to hide a DIV when the user clicks outside of it

Had the same problem, came up with this easy 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();
    }
});

Close div with click outside (parent)

You should separate both events and attach the click to the window so you can detect the clicks outside of popup-content like :

let content = document.querySelector('.popup-content');let popup = document.querySelector('.popup');let button = document.querySelector('button');
button.onclick = () => {  popup.style.display = 'block';}
window.onclick = e => {  if (e.target === popup) {    popup.style.display = 'none';  }}

.popup {  position: fixed;  z-index: 1;  left: 0;  top: 0;  width: 100%;  height: 100%;  overflow: hidden;  background-color: rgb(0, 0, 0);  background-color: rgba(0, 0, 0, 0.4);  display: none;}
.popup-content {  background-color: #fff;  margin: 10% auto;  padding: 20px;  border: 1px solid #888;  width: 25%;  min-width: 470px;  border-radius: 4px;}

<button>Open Popup</button><div class="popup">  <div class="popup-content">    <h3>Popup Title</h3>    <p>Popup Text</p>  </div></div>

Closing a div by clicking outside and clicking a button

You could bring all of your logic to the click listener and handle the elements' visibility in the function:

window.addEventListener('mousedown', function(event) {  var dropd = document.getElementById('dropdown');  var img = document.getElementById('menu');
  if (event.target === img && dropd.style.display === "none") {    dropd.style.display = "block";  } else if (event.target != dropd && event.target.parentNode != dropd) {    dropd.style.display = 'none';  }});

<img id="menu" alt="img" /><ul id="dropdown" class="dropdown-breadcrumb" style="width: 40px;">  <li>First</li>  <li>Second</li></ul>

How to close a div by clicking outside of it

Did you mean this?

$('#wrap-categories').click(function(e) {
    e.stopPropagation();
});
$('#wrap-categories').click(function() {        
    $('#wrap-categories > ul').addClass('opened').show();
});

$(document).click(function() {      
    $('#wrap-categories > ul').removeClass('opened').hide();
});

jsfiddle

Open a div by clicking and close by clicking outside of it

You can stop the propagation of your event so that when button is clicked the event doesn't bubble up to the document. Also instead of hide(), just using removeClass(...) should work for you.

Also that event propagation doesn't stop in this button listener itself but from the next event listener which in your case is on the document and that is what we require.

$('button').on('click', function(e){ 
    e.stopPropagation();
    $('.box').addClass('active');
});

//hide is by clicking outside .box
$(document).on('click', function (e) {
    if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
        
        $('.box').removeClass('active');
    }
});

button {
  margin-bottom: 20px;
}

.box {
  width: 200px;
  height: 120px;
  background: #fab1a0;
  display: none;  
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>

Pure JavaScript - Hide Div on Clicking outside

this work.
use closest method to check clicked outsde div.

closest

Ancestors of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top.

The method elem.closest(css) looks for the nearest ancestor that matches the CSS-selector. The elem itself is also included in the search.

In other words, the method closest goes up from the element and checks each of parents. If it matches the selector, then the search stops, and the ancestor is returned.

if div has id

 window.addEventListener('mouseup',function(event){
        var pol = document.getElementById('pol');
        if(!(event.target.closest("#pol"))){
            pol.style.display = 'none';
        }
  });  

h2{margin:0 0 10px}
#pol{
    width:400px;
    height:300px;
    background:#999;
    text-align:center;
    display:none;
    margin-top:0;
    margin:10px;
}

<h2>Click outside div will be hide. Click Button div will be display</h2>
<button onClick="document.getElementById('pol').style.display='block'">Show</button>
<div id="pol">
I am Tanmoy Biswas
  <p>ksjdhfksjdhfkjshdfkjsdfsf</p>
<div class="Controls_CLASS"><a href="#">Select All</a>|<a href="#">Reset</a></div>
  <ul>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="BMW" />BMW</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Mercedes" />Mercedes</li>
    <li><input type="checkbox" name="cars[]" class="Checkbox_CLASS" value="Volvo" />Volvo</li>
  </ul>
</div>

hide the div when clicking outside

Try to use event.target jQuery.

event.target

$('body').click(function(event) {  if (!$('.box').is(event.target) && $('.box').has(event.target).length === 0) {    $('.box').slideUp();    $('.link').removeClass('active');  }});$('.link').click(function(event) {  event.stopPropagation()  $(this).toggleClass('active');  $(".box").slideToggle();});

.header {  background: #fff;  padding: 20px}
body {  height: 600px;  font: 13px Verdana;}
.link_div {  position: relative}
.link {  display: inline-block;  outline: none;  padding: 10px;  color: black;  background: #e1e1e1;  box-shadow: -1px -3px 3px 0px rgba(109, 109, 109, 0.2);}
.box {  display: none;  background: #8bdeff;  padding: 30px;  position: absolute;  top: 40px;  left: 0}
.active {  background: #8bdeff}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="header">  <div class="link_div">    <a href="#" class="link">Open box</a>    <div class="box">      I am a box    </div>  </div></div>

---

Related Topics