我正在尝试通过 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();
}
});
})
谢谢大家!
最佳答案
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。
关于javascript - parent.jQuery.fancybox.close();从 Fancybox 内部只关闭 Fancybox 一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9725023/