Question

I previously asked a question as to how to make a box close when the user clicks anywhere outside of it, after trying the background overlay as given in this questions’s answer by Jason Striegel. But it was not working and not much attention was received. I’m now attempting to approach the problem from the other answer, given by Aaron Ray. He suggested the
checkExternalClick. I’ve set it up, but now the box closes whenever I click anywhere inside the box, not anywhere outside!

JS:

$(document).ready(function(){
    initHUDWindow();
});

function initHUDWindow()
{
    $(document).mousedown(checkExternalClick);  
}

function checkExternalClick(event)
{
   var target = $(event.target);
   if(target[0].id != "box")
   {        
      hideBox();
   }
}

function hideBox()
{
   $(".BoxContainer").hide();
}

CSS:

.Box
{
position:absolute;
top:15%;
left:15%;
width:500px;
height:600px;
background-repeat:no-repeat;
z-index:2;
}


.BoxContainer
{
background-image:url('images/box.png');
z-index:2;
}

HTML:

<div id = "box">
   <div class = "Box BoxContainer"></div> 
</div>

As I said, this will close the box when the user clicks inside the box. But wait! I thought it was supposed to close the box if they clicked outside?

Answer 1

Try this

$(document).ready(function(){
    initHUDWindow();

    $("#box").click(function(e){
        e.stopPropagation();
    });

});

function initHUDWindow()
{
    $(document).click(checkExternalClick);  
}

function checkExternalClick(event)
{
   hideBox();
}

function hideBox()
{
   $(".BoxContainer").hide();
}