jQuery: fancybox if close

Question

FancyBox jquery question

If you close it by pressing X I would like to get an alert("you forgot something..").

How can i do this?

            $("a#uploadImage").fancybox({
            'titleShow'     : false,
            'width':    560,
            'height':   620,
            'autoDimensions': false,
            'overlayOpacity': 0.6
            });

Answer 1

The only way I see it, take out the default closing button and put one instead.

<a href="#" id="close_fancybox"><img src="x.png" /></a>

<script>
    $('#close_fancybox').click(function(){
        var confirmation = confirm("You forgot something...?");
        if(confirmation) {
              return false;
        } else {
              $.fancybox.close();
              return false;
        }
    });
</script>

Answer 2

Open jquery.fancybox-1.3.2.js and go to Line number 910 you can see the close function for fancy box.At that place

$.fancybox.close = function() {

    alert("hai");

    if (busy || wrap.is(':hidden')) {

        return;
    }

Answer 3

The default function is $.fancybox.close so I might be inclined to do something like...

$.fancybox.originalClose = $.fancybox.close;
$.fancybox.close = function() {
    // Do whatever you want. Then do the default behavior:
    $.fancybox.originalClose();
};

It's something of a hack, but it has the advantages of not requiring any modification to the library code or to the original markup, not requiring you to directly manipulate event handlers that the library is defining, and automatically invoking your code regardless of how the box gets closed.

To change the behavior for only one specific box, the best thing is to set the modal property to true (which will disable all the built-in methods for closing the box), and then you can add your own "Save" or "Close" button that works however you want. The box will never close automatically, but you can close it when you're ready to with the $.fancybox.close() function.

Answer 4

there is a callback 'onCleanup', so:

$("a#uploadImage").fancybox({
    'titleShow'     : false,
    'width':    560,
    'height':   620,
    'autoDimensions': false,
    'overlayOpacity': 0.6m,
    'onCleanup' : function() {
        return window.confirm('Close?');
    }
});