单击复选框时,Fancybox弹出窗口会阻止

时间:2015-09-30 09:07:15

标签: jquery html fancybox fancybox-2

我的图像中的复选框有问题。点击图片fancybox打开很好。如果我再次点击复选框fancybox打开。当复选框点击时不应该打开。

HTML代码

<div class="picture"> 
<a  href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" class="fancybox popup_fancy"  rel="gallery1" id="fancybox_popup"> 
<img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt=""> 
<div class="img-overlay">
<input type="checkbox"  class="img_checkobx" name="imgcheckbox"  onclick="checkBox(this);"/>
 </div></a> </div>

图片会显示为

enter image description here

fancybox js 就像这样

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });

});
当复选框是单击事件时,

阻止fancybox弹出窗口。谁能建议如何解决这个问题。谢谢你提前

2 个答案:

答案 0 :(得分:1)

点击复选框

可以阻止fancybox
$('.img_checkobx').click(function(){
   $.fancybox.cancel();
});

答案 1 :(得分:1)

使用propagation上的event停止siblings e.stopImmediatePropagation() checkbox click,如下所示:

$('.img_checkobx').click(function(e){
    e.stopImmediatePropagation();
});

<强> DEMO HERE