FancyBox close from within iframe and take parent page to the link

Question

I found applying the following function to a links onclose works to close Fancybox from within an iFrame: parent.$.fancybox.close();

I want to take this further and have the link take the parent page to a new url. I've tried the following but it doesn't work:

<a onclick="location.href='http://www.domain.com/page/';parent.$.fancybox.close();"> Close and go to page</a>

using a href doesn't work either as the onclose takes precedence.

score 35 · Accepted Answer · answered Sep 07 '10 at 19:42

35

Very simple solution... can't believe I didn't think of this!!!

<a href="http://www.domain.com/page/" target="_parent"> Close and go to page</a>

Sometime, I swear I try to make things more difficult than they actually are!

answered Sep 07 '10 at 19:42

Mr Jonny Wood

Man, I don't care this is just a "thank you" reply. Be well and thank you. Clean and quick solution. – Luis Jul 11 '16 at 22:29

score 17 · Answer 2 · answered Feb 22 '11 at 13:07

17

You can also do this by writing a function on the parent page:

function closeFancyboxAndRedirectToUrl(url){
    $.fancybox.close();
    window.location = url;
}

Then on the link within the iframe, you can do this:

<a onclick="parent.closeFancyboxAndRedirectToUrl('http://www.domain.com/page/');">Close and go to page</a>

answered Feb 22 '11 at 13:07

Ryan Kohn

2

This is also quite useful if you want to use a function in the modal that calls a function in the parent to actually close it (extremely useful for showing notifications within the parent when the modal closes, e.g after submitting a form) – Tim Post Feb 02 '12 at 16:52

score 17 · Answer 3 · edited Feb 28 '12 at 04:59

17

no need to close fancy box just use

function name(){
    self.parent.location.href='pageg.php';
}

edited Feb 28 '12 at 04:59

animuson

answered Feb 28 '12 at 04:57

tarshi

2

I've tried all the suggestions above and only this one worked for me! Thank you! – Filipa Lacerda Jan 08 '13 at 16:05

3 Answers3