close fancy box from function from within open 'fancybox'

Question

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?

Are there any errors being generated? Also, are you using any other javascript libraries on the page in addition to jQuery (prototype or mootools, etc). — Doug Neiner, Dec 01 '09 at 22:52

score 166 · Accepted Answer · edited Jan 10 '12 at 20:08

166

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

See Fancybox API documentation.

edited Jan 10 '12 at 20:08

Wayne Conrad

90,071
22
147
183

answered Jun 25 '10 at 14:21

Matt Furlong

1,776
1
11
3

7

I had trouble with $.fancybox.close(), but this worked for me. – rrrhys Aug 18 '10 at 08:14

score 17 · Answer 2 · answered Dec 01 '09 at 22:19

17

According to http://fancybox.net/faq

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.

answered Dec 01 '09 at 22:19

Justin Johnson

29,495
7
60
86

6

Haha... I look at the source, you look FAQ. +1 for you being smarter :) – Doug Neiner Dec 01 '09 at 22:25
5

Looks like they have updated the FAQ to have you call $.fancybox.close(); – Jim Geurts May 16 '11 at 00:33

score 12 · Answer 3 · edited Dec 15 '11 at 21:35

12

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

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

edited Dec 15 '11 at 21:35

Tim Cooper

144,163
35
302
261

answered Jun 09 '11 at 09:54

Ravinder Singh

3,044
6
26
45

score 9 · Answer 4 · answered Feb 11 '10 at 11:08

9

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.

answered Feb 11 '10 at 11:08

marcelo-ferraz

2,887
3
34
53

But this method isn't removing the back-ground div. It just close the box. – Zote Mar 10 '10 at 14:46
If your background hasn't been removed, then either you created that background and forced, somehow fancybox to use it, or you are experiencing an error on your js, somewhere in the moment that the fancy box is closing. Perhaps you need to try something bold: open the fancy box js file, and put alerts naming each part of that function. The one that not opens, is the line that gives the error. You can, also in other approach, use a try catch statement, and show or write the error as soon as it happens. Just in case, here is how to use it: http://www.w3schools.com/jS/js_try_catch.asp. Good luck. – marcelo-ferraz Mar 10 '10 at 19:24
Just to add some more info: Some js errors that happen to happen in runtime, sometimes are not shown in error logs, if you force it to re-throw the exception, they usually are caught by the error logs. – marcelo-ferraz Mar 10 '10 at 19:29

score 5 · Answer 5 · answered Feb 14 '13 at 11:44

5

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!

answered Feb 14 '13 at 11:44

Affan Pathan

290
6
15

This is quite helpful, could also be done with .trigger('click'); – SoluableNonagon Mar 18 '13 at 22:15
Since the frame loaded inside my FancyBox had no jQuery references, I ended up using this and it worked fine. – Rafael Merlin Nov 05 '14 at 13:22

score 4 · Answer 6 · edited Jul 05 '12 at 11:58

4

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

parent.jQuery.fancybox.close()

edited Jul 05 '12 at 11:58

Taryn

224,125
52
341
389

answered Jul 05 '12 at 11:43

jai

499
5
19

1

Of all of these this was the one that worked for me. – jerrygarciuh Mar 31 '15 at 18:24

niccol · Answer 7 · 2011-05-13T14:26:50.710

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.

score 2 · Answer 8 · answered Dec 01 '09 at 22:22

2

Use this to close it instead:

$.fn.fancybox.close();

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

answered Dec 01 '09 at 22:22

Doug Neiner

62,310
11
103
117

score 1 · Answer 9 · answered Apr 13 '13 at 19:46

1

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

answered Apr 13 '13 at 19:46

Albert Keil

11
1

score 1 · Answer 10 · answered Nov 04 '14 at 07:30

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.

score 1 · Answer 11 · answered Apr 11 '16 at 19:01

1

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

Woohoo.

answered Apr 11 '16 at 19:01

zillaofthegods

1,661
3
20
51

score 1 · Answer 12 · answered Nov 02 '11 at 10:35

1

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

answered Nov 02 '11 at 10:35

karabo

11
1

score 0 · Answer 13 · answered Apr 04 '13 at 08:04

0

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

answered Apr 04 '13 at 08:04

Anish Karunakaran

917
3
14
37

score 0 · Answer 14 · answered Mar 08 '14 at 03:14

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);

score 0 · Answer 15 · answered Mar 24 '16 at 21:50

0

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.

answered Mar 24 '16 at 21:50

Alexey

17
8

score -1 · Answer 16 · edited Jul 23 '17 at 06:06

-1

To close ajax fancybox window, use this:

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

edited Jul 23 '17 at 06:06

OmG

15,398
7
42
71

answered Jul 22 '17 at 04:04

Marcio Vasconcellos

1

close fancy box from function from within open 'fancybox'

16 Answers16

Linked

Related