Close bPopup when clicking outside the popup element

I've got a pop up div on my page using the bPopup (http://dinbror.dk/blog/bpopup/) plug in, and everything works fine, but I want the pop up to close when the user click's using a mouse, or on mobile touches outside the pop up div.

I've tried using some of the solutions suggested on here and checked the bPopup documentation but can't seem to get it to work.

Here's the HTML:

<div id="phone-pop">
 <table>
  <tr>
   <td>Head Office:</td>
   <td class="right">00000 000 000</td>
  </tr>
  <tr>
   <td>Offroad Mobile:</td>
   <td class="right">00000 000 000</td>
  </tr>
  <tr>
   <td>F3 Mobile:</td>
   <td class="right">00000 000 000</td>
  </tr>
  </table>
  <span class="button b-close"><img src="img/close.svg"></span>
</div>

<div id="email-pop">
 <table>
  <tr>
   <td>Name:</td>
   <td class="right">Please enter your name.</td>
  </tr>
  <tr>
   <td>Email:</td>
   <td class="right">Please enter your email address.</td>
  </tr>
  <tr>
   <td>Message:</td>
   <td class="right">Please enter your message for us.</td>
  </tr>
 </table>
 <span class="button b-close"><img src="img/close.svg"></span>
</div>

<div id="fb-pop">
 <div class="fb-page">Facebook Page Stream Here</div>
 <span class="button b-close"><img src="img/close.svg"></span>
</div>

Here's the javascript:

;(function($) {

    $(function() {
      $('#phone').bind('click', function(e) {
        e.preventDefault();
        $('#phone-pop').bPopup({
            appendTo: 'form'
            , zIndex: 2
            , easing: ('linear')
            , escClose: true
            , transitionClose: true
        });
      });
    });

    $(function() {
      $('#email').bind('click', function(e) {
        e.preventDefault();
        $('#email-pop').bPopup({
            appendTo: 'form'
            , zIndex: 2
            , easing: ('linear')
            , escClose: true
            , transitionClose: true
        });
      });
    });

    $(function() {
      $('#fb').bind('click', function(e) {
        e.preventDefault();
        $('#fb-pop').bPopup({
            appendTo: 'form'
            , zIndex: 2
            , easing: ('linear')
            , escClose: true
            , transitionClose: true
        });
      });
    });

})(jQuery);

Thanks in advance for any help.

The trick on their demo page http://dinbror.dk/bpopup/ is simple. They use another div that has css property

z-index:9998;

and the popup has

z-index:9999;

the div's code is

<div class="b-modal __b-popup1__" style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.7; z-index: 9998; cursor: pointer; background-color: rgb(0, 0, 0);"></div>

then all you need is a bit of javascript

jquery example:

$('.b-modal').click(function(){
    $('#my-modal').hide();
});