javascript - 当用户单击弹出窗口表面之外的页面上的任意位置时，如何关闭动态添加的弹出窗口？

Question

我正在使用一个名为 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>

以下是动态生成的弹出HTML。我从 Firebug 控制台获取:

<div class="js_box_image_holder_full ">
  <div id="js_box_id_3" class="js_box " style="width: 400px; top: 15%; left: 69%; margin-left: 0px; margin-top: 278px; z-index: 5003; display: block;">
    <div class="js_box_title">Contact</div>
    <div class="js_box_content">
      <style type="text/css">#js-contact-message:after{content:'\1f603'}</style>
      <div id="js_contact_message">Your details submit succesfully</div>
      <div id="js_contact_error_message"></div>
      <iframe style="display:none" name="js_contact_frame" id="js_contact_frame" frameborder="1" width="100%"> </iframe>
      <div class="main_break">
        <form method="post" action="http://58.189.67.789/prj_name/contact/" id="js_contact_form" target="js_contact_frame">     
          <div class="table">
            <div class="p_left">
              <label for="email">Full Name</label>
            </div>
            <div class="p_right">
              <input name="val[full_name]" id="full_name" value="" size="60" type="text">
            </div>
            <div class="clear"></div>
          </div>
          <div class="table">
            <div class="p_left">
              <label for="email">Email</label>
            </div>
            <div class="p_right">
              <input name="val[email]" id="email" value="" size="30" type="text">
            </div>
            <div class="clear"></div>
          </div>
          <div class="table">
            <div class="p_left">
              <label for="text">Message</label>
            </div>
            <div class="p_right">
              <textarea name="val[text]" id="text"></textarea>
            </div>
            <div class="clear"></div>
          </div>
          <div class="table" style="display:none;">
            <div class="p_left">Send Yourself a Copy</div>
          <div class="p_right">
            <input name="val[copy]" value="1" type="checkbox">
          </div>
          <div class="clear"></div>
        </div>
        <div class="table_clear">
          <input value="Submit" class="button" type="submit">
          <div class="t_right"><span id="js_comment_process"></span></div>
        </div>  
      </form>
    </div>
    <div class="js_box_title_store">Contact</div>
  </div>
  <div style="display: block;" class="js_box_close">
    <a href="#" onclick="return js_box_remove(this);">x</a>
    <span class="js_box_history">prj_name.contactform</span>
  </div>
</div>

我试过的jQuery代码如下:

$('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 控制台中收到任何错误或警告。

Answer 1

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

$(function(){
    $('.clickme').click(function(){
        $('.popup,.mask').fadeIn();
    });
    $('.mask').click(function(){
        $('.popup,.mask').fadeOut();
    });
});

.clickme{
    display:inline-block;
    cursor:pointer;
    padding:10px;
    background:#00cfff;
    color:#fff;
}
.mask{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:2;
    display:none;
}
.popup{
    display:none;
    position:fixed;
    top:20px;
    left:20px;
    width:100px;
    height:100px;
    background:#d30043;
    z-index:3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='outer'>
    <span class='clickme'>Click Me</span>
    <div class='mask'></div>
    <div class='popup'>I am a Popup</div>
</div>