Question

我向用户显示模态/灯箱。当用户单击按钮时，模式显示，页面的其余部分变暗。通常的东西。

但我想这样做。如果用户点击模态之外的任何元素，我希望模态消失，页面恢复正常。

如何做到这一点？我知道我可以为body设置一个onclick事件，然后检查事件目标是否是我的模态，但如果用户点击模态中的链接/文本框/按钮会怎么样？在这种情况下，目标将不是模态。我该如何解决这个问题？

有没有办法检查事件目标是否包含<div id="modal"></div>，所以如果是，我不会关闭模态，如果没有，这意味着用户点击模态外我可以关闭它？

Answer 1

$(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

另一种方法：

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
})

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

4 个答案: