title: How to close the dynamically added pop-up when user clicks anywhere on the page outside of that pop-up's surface?
body: <p>I'm using one jQuery pop-up library called <strong>thickbox.js</strong>. </p>
  
  <p>There is one small image present on my page. When user clicks on this image a call to some function is given, the thickbox.js library creates the HTML/CSS for pop-up on the fly and shows up the pop-up. </p>
  
  <p>The most important thing to note here is if the HTML source of page is viewed when the pop-up is shown I'm not able to see the HTML code of pop-up. I tried to view the HTML source of pop-up through Firebug console by inspecting the element then I could see the HTML source of pop-up. This indicates that the DOM doesn't contain the HTML code of pop-up box.</p>
  
  <p>Now my issue is I want to close this opened pop-up if user clicks anywhere on the page other than the pop-up area. I tried few codes but unfortunately they are not able to do the thing I want to do. Now I'm just clueless for this issue. Following is the code for your reference:</p>
  
  <pre><code>&lt;a href="#" onclick="return $Core.box('prj_name.contactform', 400);"&gt; 
  &lt;!-- This is the function call which generates the pop-up HTML on the fly --&gt;
    &lt;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"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Following is the pop-up HTML generated dynamically. I've taken from Firebug console:</p>
  
  <pre><code>&lt;div class="js_box_image_holder_full "&gt;
    &lt;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;"&gt;
      &lt;div class="js_box_title"&gt;Contact&lt;/div&gt;
      &lt;div class="js_box_content"&gt;
        &lt;style type="text/css"&gt;#js-contact-message:after{content:'\1f603'}&lt;/style&gt;
        &lt;div id="js_contact_message"&gt;Your details submit succesfully&lt;/div&gt;
        &lt;div id="js_contact_error_message"&gt;&lt;/div&gt;
        &lt;iframe style="display:none" name="js_contact_frame" id="js_contact_frame" frameborder="1" width="100%"&gt; &lt;/iframe&gt;
        &lt;div class="main_break"&gt;
          &lt;form method="post" action="http://58.189.67.789/prj_name/contact/" id="js_contact_form" target="js_contact_frame"&gt;     
            &lt;div class="table"&gt;
              &lt;div class="p_left"&gt;
                &lt;label for="email"&gt;Full Name&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="p_right"&gt;
                &lt;input name="val[full_name]" id="full_name" value="" size="60" type="text"&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="table"&gt;
              &lt;div class="p_left"&gt;
                &lt;label for="email"&gt;Email&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="p_right"&gt;
                &lt;input name="val[email]" id="email" value="" size="30" type="text"&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="table"&gt;
              &lt;div class="p_left"&gt;
                &lt;label for="text"&gt;Message&lt;/label&gt;
              &lt;/div&gt;
              &lt;div class="p_right"&gt;
                &lt;textarea name="val[text]" id="text"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="table" style="display:none;"&gt;
              &lt;div class="p_left"&gt;Send Yourself a Copy&lt;/div&gt;
            &lt;div class="p_right"&gt;
              &lt;input name="val[copy]" value="1" type="checkbox"&gt;
            &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="table_clear"&gt;
            &lt;input value="Submit" class="button" type="submit"&gt;
            &lt;div class="t_right"&gt;&lt;span id="js_comment_process"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;  
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="js_box_title_store"&gt;Contact&lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="display: block;" class="js_box_close"&gt;
      &lt;a href="#" onclick="return js_box_remove(this);"&gt;x&lt;/a&gt;
      &lt;span class="js_box_history"&gt;prj_name.contactform&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>The jQuery codes I tried are as follows:</p>
  
  <pre><code>$('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();
      }
    }
  });
  </code></pre>
  
  <p>The second code I tried is as follows:</p>
  
  <pre><code>$(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()
      }
    }        
  })
  </code></pre>
  
  <p>The issue with both of the above code snippets is the pop-up doesn't open up when user clicks on image. Also I didn't get any error or warning in a Firebug console.</p>
  
  <p>The third code snippet I tried:</p>
  
  <pre><code>$(document).mouseup(function (e) {
    var container = $(".js_box");
  
    if (!container.is(e.target) &amp;&amp; container.has(e.target).length === 0) {
  
      $(".js_box_image_holder_full").remove();
    }
  });
  </code></pre>
  
  <p>The issue I get with above code is the opened pop-up gets closed if user clicks anywhere on page other than the surface of pop-up but when user again clicks on the image to show the pop-up it doesn't come again. This time also I didn't get any error or warning in Firebug console. </p>