How to close Fancybox from a button click?

Question

I know there is a lot of topics with this questions, but I don't found the answer to my particular question ...

Refer to the FAQ, we had to use one of these to close the fancybox.

$.fancybox.close();

or

parent.$.fancybox.close();

But this doesn't work in my case.

I use an AJAX type of fancybox, see below :

  $('.fancybox2').fancybox({

            type: 'ajax',
            title: 'Admin',
            maxWidth    : 800,
            maxHeight   : 400,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'elastic',
            closeEffect : 'none',
        });

So after the click on a button, it shows another page in the fancybox. In this page there is a button with the following code :

<input type=button onclick="$.fancybox.close();" value="Save" style="margin-top:30px;" class=button>

I tried it too but the console returns me : TypeError: $.fn.fancybox.close is not a function — Europlis Logistique, Apr 01 '15 at 07:57
$.fn.fancybox.close() doesn't work for version 2.x, in fact, it raises an error. If you're using version 2.x, try $.fancybox.close(true) instead. — Hardeep Randhawa, Apr 01 '15 at 08:13
Yes I'm using version 2.1.5, I tried $.fancybox.close(true); and same result ... I tried to use this with the xAqweRx's method and same result again > — Europlis Logistique, Apr 01 '15 at 08:22

xAqweRx · Answer 1 · 2015-04-01T12:02:55.853

3

Your onclick="$.fancybox.close();" doesn't see your main fancybox object. Try to do something like this

<input type="button" value="Save" style="margin-top:30px;" class="button closeFancybox">

And in your main document

$(function(){
    $(document).on('click','.closeFancybox',function(){
            $.fancybox.close();
    })
})

Update

Please try to simulate similar behaviour on https://jsfiddle.net I've tried example that you've wrote and it worked.

edited Apr 01 '15 at 12:02

answered Apr 01 '15 at 07:40

xAqweRx

1,236
1
10
23

I tried this but it doesn't work. Nothing happend. I added a console.log('test') before $.fancybox.close(); and it returns the log, so he entered in the function – Europlis Logistique Apr 01 '15 at 07:49
No I can't, it's not online. It's on a local website :/ – Europlis Logistique Apr 01 '15 at 08:53
Do you use jQuery.noConflict mode? Try to off other JS libraries. Clean instance of fancybox works good. – xAqweRx Apr 01 '15 at 09:06
I tried the jQuery.noConflict mode and it gives the same result. I tried to off other JS libraries and it doesn't works too. – Europlis Logistique Apr 07 '15 at 09:09
@EuroplisLogistique please try to simuleate this on https://jsfiddle.net/ and tell whether it works there or not. Because I've tried to do all the same way and it worked. – xAqweRx Apr 07 '15 at 10:32

How to close Fancybox from a button click?

1 Answers1

Linked