检测用户何时在div外部单击

Question

I'm showing the user a modal/lightbox. The modal shows up and the rest of the page goes dim when the user clicks a button. Usual stuff.

However I want to do this. If the user clicks any element outside of the modal, I want the modal to go away and the page to return to normal.

How can this be done? I know I can set an onclick event for body, and then check if event target is my modal, but what if the user clicks on a link/textbox/button within the modal? In that case, target won't be the modal. How can I solve this?

Is there a way to check if the event target is contained with <div id="modal"></div> , so if it is, I won't close the modal, and if not, that means user clicked outside the modal and I can close it?

Answer 1

jsBin demo

$(document).mouseup(function(e){
   if(e.target.id !== 'modal' ){
     $('#modal').hide();
   }
});

$('#modal').mouseup(function(e){
  e.stopPropagation();  // prevent mouseup propagate to underneath layers
});

Answer 2

你可以在填充整个空间的模态下放置一个div，并将你的点击处理程序附加到它。

Answer 3

$("body").click(function(e){
    if( ! $(e.target).closest("#modal").length ){
        $('#modal').hide();
    }
});

demo

Answer 4

Another one approach:

var mouseOverModal = false;

$(document).click(function(e){
   if ( ! mouseOverModal ){
       // close modal
   }
});

$('#modal').bind("mouseenter mouseleave", function(e){
     mouseOverModal = ( "mouseenter" == e.type );
})

$('#open-modal-handler').click(function(){  
    // open modal  
    return false; // <- IMPORTANT
})