I'm trying to close a Fancybox instance from a link within the Fancybox content. I'm using parent.jQuery.fancybox.close(); as remended in this question. It works the first time, but thereafter not. Can anyone suggest a fix?
I'm hiding my content div in the page with this:
#content {
display: none;
}
And here's the link launching the Fancybox, with that content div, which includes the link to close the 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>
And this is my JS. I've tried adding the event hander to the close link on opening the Fancybox, but it didn't help.
$(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();
}
});
})
Thanks guys!
I'm trying to close a Fancybox instance from a link within the Fancybox content. I'm using parent.jQuery.fancybox.close(); as remended in this question. It works the first time, but thereafter not. Can anyone suggest a fix?
I'm hiding my content div in the page with this:
#content {
display: none;
}
And here's the link launching the Fancybox, with that content div, which includes the link to close the 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>
And this is my JS. I've tried adding the event hander to the close link on opening the Fancybox, but it didn't help.
$(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();
}
});
})
Thanks guys!
Share Improve this question edited May 23, 2017 at 12:30 CommunityBot 11 silver badge asked Mar 15, 2012 at 17:29 And FinallyAnd Finally 5,70414 gold badges73 silver badges112 bronze badges 6-
So what happens if you just put the
$('#close').on()function outside of the.fancybox()function? – Sparky Commented Mar 15, 2012 at 17:55 - Same thing Sparky - the lightbox closes the first time you launch it, but not after that. – And Finally Commented Mar 15, 2012 at 18:00
-
I guess I don't fully understand what you're trying to do. I use fancyBox and never had any problems like yours. According to the fancyBox documentation, I can't even find the
onClosed,onStartoronCleanupmethods. – Sparky Commented Mar 15, 2012 at 18:16 - Thanks Sparky, maybe I'm using a different version - I'll investigate. So you can close Fancyboxes programmatically? – And Finally Commented Mar 15, 2012 at 18:24
-
As simple as
$.fancybox.close();– Sparky Commented Mar 15, 2012 at 18:26
2 Answers
Reset to default 7parent.jQuery.fancybox.close(); should be called from within an iframe opened in fancybox. In your case you are opening inline content so the prefix parent is not needed. Additionally you must provide the correct structure to your inline content and call the closing function from there.
So your inline content should look like
<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>
because of the above you don't need this css
#content {
display: none;
}
since #content is already inside a hidden div.
then your closing function can be separated from the fancybox script... also notice the changes on the fancybox script below:
$(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
this is for Fancybox v1.3.x, the version you seem to be using. Also you should be using jQuery v1.7.x if you want the .on() method to work.
try{
parent.jQuery.fancybox.close();
}catch(err){
parent.$('#fancybox-overlay').hide();
parent.$('#fancybox-wrap').hide();
}
!!!Not Support onClose!!!