How to close a jQuery fancybox from button click

Question

I'm using fancy box to create a popup and load another page on it using an iframe. here is my code

    <script type="text/javascript">
$(document).ready(function() {

    $('.calendar .day').click(function() {
        day_num = $(this).find('.day_num').html();
        day_data = prompt('Enter Stuff', $(this).find('.content').html());
        if (day_data != null) {

            $.ajax({
                url: window.location,
                type: 'POST',
                data: {
                    day: day_num,
                    data: day_data
                },
                success: function(msg) {
                    location.reload();
                }                       
            });
            }
        });
    });
$(document).ready(function(){
    $("a.iframeFancybox1").fancybox({
    'width'           : 800,
    'height'              : 650,
    'overlayOpacity'     :  '0.4',
    'overlayColor'       :  '#000',
    'hideOnContentClick' :   false,
    'autoScale'          :   false,
    'transitionIn'       :   'elastic',
    'transitionOut'  :   'elastic',
    'type'           :   'iframe'
    });
});

</script>

It loads the page successfully and does the stuff. But instead of closing the popup form, it loads the popup source form inside the popup itself. I want to close the popup form when the work is done and return to the main menu page from which the popup was generated. How do I achieve this on a button click of the popup form.

Regards, Rangana

Answer 1

call to $.fancybox.close();

also look on this answers in the post

According to http://fancybox.net/faq

4. 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.

Answer 2

I had to use parent.jQuery.fancybox.close() with my Drupal site to get this to work properly.