parent.jQuery.fancybox.close(); 从Fancybox内部只关闭Fancybox一次

Question

我正在尝试从Fancybox内容中的链接关闭Fancybox实例.我parent.jQuery.fancybox.close();按照这个问题的推荐使用.它第一次工作,但此后没有.有人可以建议修复吗？

我在页面中隐藏了我的内容div:

#content {
    display: none;
}

这里是启动Fancybox的链接,内容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

parent.jQuery.fancybox.close();应该从一个iframe打开的fancybox中调用.在您的情况下,您打开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.