I have an application which uses Fancybox and calls it from 'a' tags as follows:

<a class="link" href="#" data-fancybox="" data-type="ajax" data-src="favourite_record.php" >Link</a>

Within 'favourite_record.php is a 'div' with ID 'modal-fvourite-record' which contains a 'form'.

I need the Fancybox to not close when the within the Fancybox when the 'submit' button is clicked.

<button data-fancybox-close="" type="submit" id="f-submit-button" onclick="Save();">Save</button>

I've tried to handle this by adding the following JS code inside 'favourite_record.php':

<script type="text/javascript">

        $('#modal-favourite-record').fancybox({
            beforeClose: function(instance, current, e) {
                return false;
            }
        });

        function Save() {
            document.favourite_record.submit();
        }

    </script>

However when I open the Fancybox from the 'a' tag and click within the Fancybox, it opens a second Fancybox on top.

How can I specify the 'beforeClose' functionality without it opening a second Fancybox?