Javascript 当用户单击页面上弹出窗口以外的任何位置时，如何关闭动态添加的弹出窗口'；什么是表面？

我正在使用一个名为thickbox.js的jQuery弹出库

我的页面上有一个小图片。当用户单击此图像时，会调用某些函数，thickbox.js库会动态创建弹出窗口的HTML/CSS并显示弹出窗口

这里需要注意的最重要的一点是，如果在显示弹出窗口时查看了页面的HTML源代码，我就看不到弹出窗口的HTML代码。我试图通过Firebug控制台查看弹出窗口的HTML源代码，方法是检查元素，然后才能看到弹出窗口的HTML源代码。这表示DOM不包含弹出框的HTML代码

现在我的问题是，如果用户单击页面上除弹出区域以外的任何位置，我想关闭这个打开的弹出窗口。我尝试了一些代码，但不幸的是，它们不能做我想做的事情。现在我对这个问题一无所知。以下代码供您参考：

<a href="#" onclick="return $Core.box('prj_name.contactform', 400);"> 
<!-- This is the function call which generates the pop-up HTML on the fly -->
  <img width="33" height="89" align="middle" border="0" pagespeed_url_hash="3893298907" alt="" src="http://58.189.67.789/theme/frontend/foxplus/style/default/image/layout/contact.jpeg">
</a>

我尝试的第二个代码如下：

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

$(document).click(function(event) { 
  if(!$(event.target).closest('.js_box_image_holder_full').length) {
    if($('.js_box_image_holder_full').is(":visible")) {
      $('.js_box_image_holder_full').hide()
    }
  }        
})

上述两段代码的问题在于，当用户单击图像时，弹出窗口不会打开。我也没有在Firebug控制台中得到任何错误或警告

我尝试的第三个代码段：

$(document).mouseup(function (e) {
  var container = $(".js_box");

  if (!container.is(e.target) && container.has(e.target).length === 0) {

    $(".js_box_image_holder_full").remove();
  }
});

---

我在上面代码中遇到的问题是，如果用户单击页面上除弹出窗口外的任何位置，打开的弹出窗口就会关闭，但当用户再次单击图像以显示弹出窗口时，弹出窗口不会再次出现。这次我在Firebug控制台中也没有收到任何错误或警告

我不使用任何类型的弹出插件，但我有简单的解决方案供您使用。触发时，淡入弹出窗口旁边的空遮罩，并使遮罩成为淡出代理。如下所示

$（函数（）{
$（'.clickme'）。单击（函数（）{
$（'.popup，.mask'）.fadeIn（）；
});
$（'.mask'）。单击（函数（）{
$（'.popup，.mask'）.fadeOut（）；
});
});
。单击我{
显示：内联块；
光标：指针；
填充：10px；
背景：#00cfff；
颜色：#fff；
}
.面具{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.4）；
z指数：2；
显示：无；
}
.弹出窗口{
显示：无；
位置：固定；
顶部：20px；
左：20px；
宽度：100px；
高度：100px；
背景#d30043；
z指数：3；
}

点击我
我是一个弹出窗口

$(document).mouseup(function (e) {
  var container = $(".js_box");

  if (!container.is(e.target) && container.has(e.target).length === 0) {

    $(".js_box_image_holder_full").remove();
  }
});