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

Question

我已经使用bPopup (http://dinbror.dk/blog/bpopup/)插件在我的页面上弹出了一个div，一切正常，但是我希望当用户单击鼠标或在弹出div之外的移动触摸时，弹出关闭。

我尝试过使用这里建议的一些解决方案，并检查了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);

提前感谢您的帮助。

Answer 1

他们的演示页面http://dinbror.dk/bpopup/的诀窍很简单。它们使用另一个具有css属性的div。

z-index:9998;

弹出式窗口

z-index:9999;

div的代码是

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

然后你只需要一点javascript

jquery示例：

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