當用戶點擊該彈出窗口外的頁面上的任何位置時，如何關閉動態添加的彈出窗口？

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

我沒有使用任何類型的插件彈出，但我有簡單的解決方案。 在觸發器上，淡入彈出窗口旁邊的空掩碼，並使掩碼成為淡出的代理。 如下所示。

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