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

Question

我正在尝试通过 Fancybox 内容中的链接关闭 Fancybox 实例。我正在按照 this question 中的建议使用 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(); 应该从在 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。