0

我使用 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);

提前感谢您的帮助。

4

1 回答 1

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();
});
于 2015-12-18T15:45:50.157 回答