在 jQuery 中弹出层中如何实现点击空白处关闭弹出层

为了实现这个功能，最先想到的办法是在页面的所有元素上绑定 click 事件，在事件处理函数中关闭弹出层。

$(document).click(function(){
  $("#myDiv").hide();
});

可是这样的处理会导致弹出层根本弹不出来，因为触发弹出的元素也被绑定了这一事件，刚刚执行弹出就执行了关闭，自然无法弹出。

然后想到的第二个方案是绑定除弹出层自身外的所有元素。

$("*").children().each(function() {
  if ($(this) !== $self) {
    $(this).bind("click", function() {
      $("#myDiv").hide();
    });
  }
});

本以为这样就 ok 了，结果执行的时候根本没有绑定上。

最后想到的办法是，弹出的时候在弹出层底下插入一个覆盖全页面的透明 div，在这个 div 上绑定 click 事件，在处理函数中关闭弹出层。这样就最终实现了标题的效果。

$("body").append("<div class='bg'></div>");

$(".bg").click(function() {
  $("#myDiv").hide();
});

需要注意的是，弹出层和后面插入的这个 div 之间的 z-index 要设置好，否则弹出层在下面的话，就根本没法处理事件响应了。