Question

我希望在点击任一跨度时关闭fancybox，目前它似乎是在点击它们之后重新打开窗口并且点击其他地方就像它应该关闭它一样。

<div class="fancybox" style="display: none;">
    <span class="ChooseEnglish">English</span>
    <span class="ChooseCymraeg">Cymraeg</span>
</div>    

$(".fancybox").fancybox({
    closeClick: true
});
$( ".fancybox" ).trigger( "click" );

$( ".ChooseEnglish" ).click(function() {
    $.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function() {
    $.fancybox.close();
});

http://jsfiddle.net/K8NDm/

由于

亚历

Answer 1

问题是选择器.fancybox绑定到fancybox 但它也是fancybox的内容。换句话说，该选择器既是fancybox的触发器又是目标。

当然，选择器上的任何click和/或其内容（您的<span>）都会重复触发fancybox。

你需要另一个选择器来激活fancybox（如果你愿意，可以隐藏它），如：

<a href="#fancybox" class="fancybox" style="display: none;"><a>

然后将div选择器从类更改为 ID ，以便可以通过以下链接进行定位：

<div id="fancybox" style="display: none;">
    <span class="ChooseEnglish">English</span>
    <span class="ChooseCymraeg">Cymraeg</span>
</div>

最后是简化的脚本：

$(".fancybox").fancybox({
    closeClick: true
}).trigger("click"); // you can chain fancybox and trigger methods

$(".ChooseEnglish, .ChooseCymraeg").click(function () {
    $.fancybox.close();
}); // bind the same click event to both selectors at once

参见 JSFIDDLE

注意：如果您想阻止访问者关闭fancybox 而不选择任何（<span>）选项，那么您可以添加{{1而是喜欢：

modal:true

参见forked JSFIDDLE

Answer 2

点击事件从跨度冒泡到div，因此fancybox重新打开。您可以使用.stopPropagation来阻止冒泡：

$( ".ChooseEnglish" ).click(function(e) {
    e.stopPropagation();
    $.fancybox.close();
});
$( ".ChooseCymraeg" ).click(function(e) {
    e.stopPropagation();
    $.fancybox.close();
});

点击跨度时，Fancybox不会关闭

2 个答案: