For some reason I cannot get Fancybox to close using the close button they supplied. I have managed to get it to close using an tag however a popup window appears from nowhere when its clicked?

Here is a link to the page in question:

.php

Here is what I am calling:

<script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link href="assets/css/jquery.fancybox.css?v=2.1.5" rel="stylesheet">
    <script src="assets/js/jquery.fancybox.pack.js?v=2.1.5"></script>

        <script type="text/javascript">
        $(document).ready(function($){
            $.fancybox.open([{
                content: $(".popup")
        }]); 
        });
        </script>

The close button I added is on the RHS at the bottom (called close).

<a href="javascript:void(0);" onclick="$.fancybox.close();">Close</a>

Any help would be much appreciated :)

Cheers

For some reason I cannot get Fancybox to close using the close button they supplied. I have managed to get it to close using an tag however a popup window appears from nowhere when its clicked?

Here is a link to the page in question:

http://events.usefulsocialmedia./customerservice/brochure2-thank-you.php

Here is what I am calling:

<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.js"></script>
    <link href="assets/css/jquery.fancybox.css?v=2.1.5" rel="stylesheet">
    <script src="assets/js/jquery.fancybox.pack.js?v=2.1.5"></script>

        <script type="text/javascript">
        $(document).ready(function($){
            $.fancybox.open([{
                content: $(".popup")
        }]); 
        });
        </script>

The close button I added is on the RHS at the bottom (called close).

<a href="javascript:void(0);" onclick="$.fancybox.close();">Close</a>

Any help would be much appreciated :)

Cheers

• javascript
• jquery
• fancybox

• What error you are getting? – Murali Murugesan Commented Sep 24, 2013 at 9:21

2 Answers 2

To close the fancybox you can add class attribute to your link as below:

<a href="#" class="closeLink">Close</a>  

JS CODE:

$(document).ready(function(){  
    $('.closeLink').on('click', function(event){
        event.stopPropagation();
        $.fancybox.close();
    });
});  

Just try like this

<a href="javascript:$.fancybox.close();" >Close</a>

Hope it helps you.