How to close the dynamically added pop-up when user clicks anywhere on the page outside of that pop-up's surface?

I'm using one jQuery pop-up library called thickbox.js.

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.

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.

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 clue less for this issue. Please help me in this regard. Thanks.

Following is the code for your reference.

<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://ift.tt/1rFJVk0">
</a>

Following is the pop-up HTML generated dynamically. I've taken from firebug console:

<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://ift.tt/1rFJVk2" 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>

The jQuery codes I tried are as follows:

$('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();
    }
  }
});

The issue with above code 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.

The second code I tried is as follows:

$(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();
  }
});

The issue I get with above code is the opened po-up gets close 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.

Please help me in this regard.

If you have any other query regarding the issue please let me know.

Thanks.