从Fancybox内部调用parent.jQuery.fancybox.close()只会关闭一次Fancybox。

Question

我正在尝试通过 Fancybox 内容中的链接关闭 Fancybox 实例。我使用 parent.jQuery.fancybox.close();，正如这个问题所建议的那样。它第一次可以工作，但之后就不行了。有人能提供一个解决方法吗？

我正在使用以下代码隐藏页面中的内容 div：

#content {
    display: none;
}

这里是启动Fancybox的链接，其中包括关闭Fancybox的链接。内容部分为该div。

<a href="#" id="launch">Launch</a>

<div id="content">
    <p>Nunc porttitor pellentesque magna a pulvinar. Vestibulum id diam lectus. Praesent vel dictum est.</p>

    <a href="#" id="close">Close</a>
</div>

以下是我的JS代码。我尝试在打开Fancybox时向关闭链接添加事件处理程序，但没有起到作用。

$(document).ready(function(){
    $('#launch').fancybox({
        'width': 300,
        'content': $('#content'),
        'onClosed':function () {
            $("#content").hide();
        },
        'onStart':function () {
            $("#content").show();
            $('#close').on('click', function(){
                //console.log($(this).parent);
                parent.jQuery.fancybox.close();
            })
        },
        'onCleanup':function () {
            $("#content").unwrap();
        }
    });
})

感谢大家！

- And Finally

---

如果您将$('#close').on()函数放在.fancybox()函数之外会发生什么？ - Sparky

同样的问题，Sparky - 点击灯箱第一次会关闭，但之后就不会了。 - And Finally

我想我不完全明白你试图做什么。 我使用fancyBox，从来没有像你这样的问题。 根据fancyBox文档，我甚至找不到onClosed，onStart或onCleanup方法。 - Sparky

谢谢Sparky，也许我正在使用不同的版本-我会调查一下。所以你可以以编程方式关闭Fancyboxes吗？ - And Finally

就像 $.fancybox.close(); 一样简单。 - Sparky

非常感谢，我会尝试使用你给我的链接版本。 - And Finally

Answer 1

parent.jQuery.fancybox.close();应该在fancybox中打开的iframe内部调用。在您的情况下，您正在打开inline内容，因此不需要前缀parent。此外，您必须为您的内联内容提供正确的结构，并从那里调用关闭函数。

因此，您的内联内容应如下所示：

<div style="display: none;">
 <div id="content">
   <p>Nunc porttitor pellentesque magna a pulvinar. Vestibulum id diam lectus. Praesent vel dictum est.</p>
   <a href="javascript:;" id="close">Close</a>
 </div>
</div>

由于以上原因，您不需要使用这个CSS。

#content {
    display: none;
}

因为#content已经在一个隐藏的div中了。

那么你的关闭函数可以和fancybox脚本分离... 还要注意下面的fancybox脚本更改：

$(document).ready(function(){
 $('#close').on('click', function(){
  //console.log($(this).parent);
  $.fancybox.close();
 }); //on
/*
// you could also do 
$('#close').click(function(){
 $.fancybox.close();
});
*/
 $('#launch').click(function(){
  $.fancybox({
   'width': 300,
   'href': '#content',
   'onCleanup':function () {
    $("#content").unwrap();
   }
  });//fancybox
 }); // click
}); //ready

这是针对 Fancybox v1.3.x 的内容，而您似乎正在使用该版本。此外，如果您想要使用 .on() 方法，应该使用 jQuery v1.7.x。

- JFK

Answer 2

    try{
        parent.jQuery.fancybox.close();
    }catch(err){
        parent.$('#fancybox-overlay').hide();
        parent.$('#fancybox-wrap').hide();
    }

!!!不支持 onClose!!!

- Aommy Indy