Close jQuery Fancybox (manually) with a link

Question

So I've tried using all the solutions that is available on the internet, but doesn't seem to work for some reason.

I'm using (or the project, rather) fancybox-1.3.4, and other than the close icon, a link needs to be used to close the pop-up.

<a id="kpitilepoplink" href="#kpitilepop">Trigger pop-up</a>

<div style="display:none;">
    <div id="kpitilepop" class="newpopupcontainer">
    Contents
    <a href="#" id="popcloselink" class="blu-btn">Close</a>
    </div>
</div>

<script type="text/javascript">
     $(document).ready(function () {                                    
         $("a#kpitilepoplink").fancybox({
         }); 
     });                                     
</script> 
<script type="text/javascript">
     $(document).ready(function(){
         $('#popcloselink').click(function(){                                       
         alert();
         $(this).fancybox.close();
         });
     });
</script>

The solutions available on the internet is not working, and i'm getting fancybox.close is not a function error in the browser console

have you read the documentation for your version of the plugin? — madalinivascu, Mar 14 '17 at 05:31
@madalinivascu - well the documentation says `$.fancybox.close` which doesn't work. — Sagar Raj, Mar 14 '17 at 05:35
Possible duplicate of [How to close a jQuery fancybox from button click](http://stackoverflow.com/questions/4398740/how-to-close-a-jquery-fancybox-from-button-click) — 4b0, Mar 14 '17 at 05:37
@madalinivascu - I've tried all that. Unfortunately, doesn't work. — Sagar Raj, Mar 14 '17 at 05:38
@Shree - You probably didn't read my question properly. I said "I've tried using all the solutions that is available on the internet, but doesn't seem to work" — Sagar Raj, Mar 14 '17 at 05:39

score 2 · Accepted Answer · answered Mar 14 '17 at 05:36

2

The documentation has the following method

$.fancybox.close();

Make sure you prevent the default click event

another solution will be to trigger the x close button

 $("a.fancybox-close").trigger("click");

answered Mar 14 '17 at 05:36

madalinivascu

32,064
4
39
55

1

Works like a charm. Thanks. – Sagar Raj Mar 14 '17 at 05:43
glad to have helped :) – madalinivascu Mar 14 '17 at 05:45

score 1 · Answer 2 · answered Mar 14 '17 at 06:22

Just a tip: if you are using fancyBox3, your could simply add data-fancybox-closeto any element and clicking it will close current fancyBox instance.

For example:

$.fancybox.open('<div><p>Hello! This is fancyBox!</p><p><a href="javascript:;" data-fancybox-close>Close</a></p></div>');

score 0 · Answer 3 · answered Mar 14 '17 at 05:40

0

Suppose you want to close it on click of "Close" button //popcloselink is the id of your close button.

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

answered Mar 14 '17 at 05:40

IamDD

1
1

Close jQuery Fancybox (manually) with a link

3 Answers3

Linked