jquery - 如何在不使用叠加层的情况下单击我的页面来关闭花式框：true

Question

当我在fancybox 内容之外单击时，如何关闭fancybox http://fancyapps.com/fancybox/ 。我可以使用叠加：true，但我希望在fancybox 打开时仍然能够单击另一个图像。

我试过这段代码，但它完全取消了fancybox的打开。

$(document).click(function() {
    $.fancybox.close()
});

Answer 1

这可能不是一个优雅的解决方案，但会起作用..

要在单击外部时关闭花式框，可以使用以下内容..

$(':not(<fancybox_links_selector>)').live('click', function(event){
    event.stopPropagation();
    $.fancybox.close();
});

通过使用这个 jQuery :not 运算符和正确的选择器，您可以选择除打开幻想框的元素之外的所有元素（在您的情况下是图像..）

现在，当您单击所需的链接（再次图像..）时能够打开花式框，您应该阻止他们的点击事件传播给父母..

见下文 ...

$('<fancybox_links_selector>').live('click', function(event){
    event.stopPropagation();
    event.preventDefault();

    // write any extra required code here
    return false;
});

这将阻止点击事件冒泡并允许fancybox打开......

希望这可以帮助 ...