close fancy box from function from within open 'fancybox'

JavascriptJqueryFancybox

Javascript Problem Overview


Hi all i want to be able to close fancyBox when it is open from within.

I have tried the following but to no avail:

function closeFancyBox(html){
	var re = /.*Element insert complete!.*/gi;
	if( html.search( re ) == 0 ){
		$.fancybox.close();
		//alert("foo");
	}
}

foo will open in dialog but will not close down. any hints?

Javascript Solutions


Solution 1 - Javascript

Try this: parent.$.fancybox.close();

See Fancybox API documentation.

Solution 2 - Javascript

According to <http://fancybox.net/faq>

> 4. How can I close FancyBox from other element? ? > > Just call $.fn.fancybox.close() on > your onClick event

So you should just be able to add in the fn.

Solution 3 - Javascript

If you just want to close the fancy box it is sufficient to close it.

$('#inline').click(function(){
  $.fancybox.close();
});

Solution 4 - Javascript

It is no use putting the .fn, it will reffers to the prototype.
What you need to do is $.fancybox.close();

The thing is that you are maybe experiencing another error from js.
There are any errors on screen?
Is your fancybox and jquery the latest releases? jquery is currently in 1.4.1 and fb in 1.3 something

Experiment putting a link inside the fancybox and put that function in it.

You probably had read that, but in any case, http://fancybox.net/api

One thing that you probably might need to do is isolate each part in order to realize what it is.

Solution 5 - Javascript

You can even close fancybox by get close button id and call click event on that id.

<input type='button' value='Cancel' onclick='javascript:document.getElementById("fancybox-close").click();' />

It works for me!

Solution 6 - Javascript

i had the same issues a longtime then i got the solution by the below code. please use

parent.jQuery.fancybox.close()

Solution 7 - Javascript

Bit of an old thread but ...

Actually, I suspect that the answer to the original question about how to close the window from within the window has more to do with the fact that the click event is not attached to the element. If the click event is attached in document.ready the event will not be attached when fancybox creates the new window.

You need to re-apply the click event once the new window . Probably the easiest way to do this is to use onComplete feature.

This works for me:

$(".popup").fancybox({
	'transitionIn'	:	'fade',
	'transitionOut'	:	'elastic',
	'speedIn'		:	600, 
	'speedOut'		:	400, 
	'overlayShow'	:	true,
	'overlayColor'	:	'#000022',
            'overlayOpacity'  : 0.8,
            'onComplete' : function(){$('.closer').click(function(){parent.$.fancybox.close();})}
});

Actually, after a bit of thought 'live' rather than 'click' or 'bind' might work just as well.

Solution 8 - Javascript

Use this to close it instead:

$.fn.fancybox.close();

Judging from the fancybox source code, that is how they handle closing it internally.

Solution 9 - Javascript

After struggling myself with this I found a solution that works just replace the $ with jQueryjQuery.fancybox.close() and I made it an inline script on an onClick. Going to check if i can call it from the parent

Solution 10 - Javascript

For those who spent hours like me to find out the solution for inline type: window.setTimeout(function(){$.fancybox.close()},10);

Solution 11 - Javascript

I ended up using:

<script>parent.$("#fancy_close").click();</script>

I guess the version of fancybox we have doesn't have a $.fancybox.close() function for me to call :(

FYI, I just wanted the page to close the fancybox, as it had finished its processing in PHP.

Solution 12 - Javascript

Add $.fancybox.close() to where ever you want it to be trigged, in a function or a callback, end of an ajax call!

Woohoo.

Solution 13 - Javascript

Within an iframe use - parent.$.fancybox.close();

Solution 14 - Javascript

to close fancybox by funciton its necessary to make setTimtout to the function that will close the fancybox Fancybox needs some time to acept the close function If you call the function directly will not work

function close_fancybox(){
$.fancybox.close();
                     }
setTimeout(close_fancybox, 50);

Solution 15 - Javascript

yes in Virtuemart its must be button CLOSe-continue shopping, not element, because after click you can redirect.. i found this redirect bug on my ajax website.

Solution 16 - Javascript

To close ajax fancybox window, use this:

onclick event -> $.fancybox.close();
return false;  

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPhil JacksonView Question on Stackoverflow
Solution 1 - JavascriptMatt FurlongView Answer on Stackoverflow
Solution 2 - JavascriptJustin JohnsonView Answer on Stackoverflow
Solution 3 - JavascriptRavinder SinghView Answer on Stackoverflow
Solution 4 - Javascriptmarcelo-ferrazView Answer on Stackoverflow
Solution 5 - JavascriptAffan PathanView Answer on Stackoverflow
Solution 6 - JavascriptjaiView Answer on Stackoverflow
Solution 7 - JavascriptniccolView Answer on Stackoverflow
Solution 8 - JavascriptDoug NeinerView Answer on Stackoverflow
Solution 9 - JavascriptkaraboView Answer on Stackoverflow
Solution 10 - JavascriptAlbert KeilView Answer on Stackoverflow
Solution 11 - JavascriptGhost8472View Answer on Stackoverflow
Solution 12 - JavascriptjshbrmnView Answer on Stackoverflow
Solution 13 - JavascriptAnish KarunakaranView Answer on Stackoverflow
Solution 14 - Javascriptuser3395039View Answer on Stackoverflow
Solution 15 - JavascriptAlexeyView Answer on Stackoverflow
Solution 16 - JavascriptMarcio VasconcellosView Answer on Stackoverflow