javascript - 单击弹出元素外部时关闭 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();
});