在弹出元素外部单击时关闭bPopup

我的页面上有一个使用bPopup的弹出div(http://dinbror.dk/blog/bpopup/)插入，一切都很好，但我希望当用户使用鼠标点击时，或者在弹出分区之外的移动触摸时，弹出窗口关闭。

我已经尝试使用这里建议的一些解决方案，并查看了bPopup文档，但似乎无法使其发挥作用。

这是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>

这是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);

提前感谢您的帮助。