我正在尝试从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();
}
});
})
谢谢你们!
答案 0 :(得分:7)
parent.jQuery.fancybox.close();
内调用{p> 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。
答案 1 :(得分:0)
try{
parent.jQuery.fancybox.close();
}catch(err){
parent.$('#fancybox-overlay').hide();
parent.$('#fancybox-wrap').hide();
}
!!!不支持onClose !!!