在弹出元素外单击时关闭 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/ 上的技巧很简单。他们使用另一个 div css 属性

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

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

Close bPopup when clicking outside the popup element

javascript

jquery

bpopup