我使用 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);
提前感谢您的帮助。