Manu Manu - 6 months ago 20
Javascript Question

how to close popup DIV by clicking anywhere on the body

I have an overlay DIV that appear once a user clicks on a link. The user can close the overlay by clicking on the "X" link within the DIV. I want the user to be able to close the overlay DIV by clicking anywhere on the page. Please help me to implement this functionality. Following are my code...



$(function(){
var mHeight = $(window).height();
var popHeight = $(window).height();
var mWidth = $(window).width();
var popWidth = $(window).width();

$(".pop_Show").click(function(){
if(mHeight < popHeight){
$(".pop_Content").css({position: "absolute", "margin-top": "0"});
$(".pop_Content").animate({top: '0'}, "slow");
}else{
$(".pop_Content").animate({top: '50px'}, "slow");
}
if(mWidth < popWidth){
$(".pop_Content").css({left: "0", "margin-left": "0"});
}
$("body").append("<div class='disable_bg'></div>");
});


//Script for hiding the overlay div by clicking on X

$(".pop_Close").click(function(){
var popHeight2 = popHeight+500;
$(".pop_Content").animate({top: "-"+popHeight2}, "100",function(){$(".disable_bg").remove();});
});


// I want the script for hiding the overlay by clicking anywhere in the page

});

.pop_Content {
overflow: hidden;
z-index:2500;
position:fixed;
top:-2000px;
left: 50%;
margin-left:-150px;
width:300px;
height:100px;
background:#ccc;
padding:15px;
}
.pop_Close{
position:absolute;
z-index:1000;
top:0;
right:0;
float:right;
cursor:pointer;
margin:0px 10px;
color:#595959;
font:1.5em verdana;
text-align:center;
}
.pop_Close:before {
content: "x";
}
.disable_bg {
background: black;
opacity: .5;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
position: fixed;
z-index: 2450;
}

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

<body>
<a href="#" class="pop_Show">Click Me</a>

<!--Overlay Div-->
<div class="pop_Content"><a class="pop_Close"></a>
I am the Overlay Div
</div>

</body>
</html>




Answer

You'll need to add an event listener that can check if you've clicked on the overlay background. I have modified the code so that it re-uses the same element instead of creating a new one each time. This adds the event listener each time you append the overlay's background (jQuery removes the event listeners on removal). I also modified the logic of the click event listener so that it only targets click events that directly match the element the listener was applied to. This prevents the overlay from being closed by clicking on the content inside of it.

$(function(){
  var mHeight = $(window).height();
  var popHeight = $(window).height();
  var mWidth = $(window).width();
  var popWidth = $(window).width();
  var disable_bg =  $(document.createElement('div')).addClass('disable_bg'), closeFn;
  
  $(".pop_Show").click(function(){
    if(mHeight < popHeight){
      $(".pop_Content").css({position: "absolute", "margin-top": "0"});
      $(".pop_Content").animate({top: '0'}, "slow");
    }else{
      $(".pop_Content").animate({top: '50px'}, "slow");
    }
    if(mWidth < popWidth){
      $(".pop_Content").css({left: "0", "margin-left": "0"});
    }
   $('body').append(disable_bg);
   disable_bg.click(closeFn);
  });
  

//Script for hiding the overlay div by clicking on X
  
  $(".pop_Close").click(closeFn = function(e){
    if(e.target !== this) return;
    var popHeight2 = popHeight+500;
    $(".pop_Content").animate({top: "-"+popHeight2}, "100",function(){disable_bg.remove()});
  });
  
// I want the script for hiding the overlay by clicking anywhere in the page
  
});
.pop_Content {
  overflow: hidden; 
  z-index:2500; 
  position:fixed; 
  top:-2000px; 
  left: 50%;
  margin-left:-150px;
  width:300px;
  height:100px;
  background:#ccc;
  padding:15px;
}
.pop_Close{
  position:absolute;
  z-index:1000;
  top:0;
  right:0;
  float:right; 
  cursor:pointer;
  margin:0px 10px;
  color:#595959;
  font:1.5em verdana;
  text-align:center;
}
.pop_Close:before {
  content: "x";
}
.disable_bg {
  background: black;
  opacity: .5;
  left: 0px;
  top: 0px; 
  width: 100%; 
  height: 100%; 
  position: fixed; 
  z-index: 2450;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>
  <a href="#" class="pop_Show">Click Me</a>

  <!--Overlay Div-->
  <div class="pop_Content"><a class="pop_Close"></a>
  I am the Overlay Div
  </div>
  
</body>
</html>

Comments