parent.jQuery.fancybox.close()；在Fancybox中只关闭Fancybox一次

Question

我试图通过Fancybox内容中的链接关闭一个Fancybox实例。我使用的是this question中推荐的parent.jQuery.fancybox.close();。它第一次起作用，但之后就不起作用了。有没有人能给出一个解决办法？

我将内容div隐藏在页面中，如下所示：

#content {
    display: none;
}

这是启动Fancybox的链接，带有该content div，其中包含关闭Fancybox的链接。

<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();
        }
    });
})

谢谢你们！

Answer 1

应该从在fancybox中打开的iframe中调用parent.jQuery.fancybox.close();。在您的示例中，您打开的是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。

Answer 2

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

！支持onClose！