Question

Greetings,

I am using facebox popup jquery plugin.
In their JS they have the following event

/*
   * Bindings
   */
  $(document).bind('close.facebox', function() {
    $(document).unbind('keydown.facebox')
    $('#facebox').fadeOut(function() {
      $('#facebox .content').removeClass().addClass('content')
      hideOverlay()
      $('#facebox .loading').remove()
    })  
  })

It just close the Popup.
I want to hook some of my own code on this close.facebox, for test and alert would do.

So in my js on my web page i did the following:

<script type="text/javascript">
    // listen to close action on popup


    // submit request
    $("#request-submit").click(function(){

        // Show popup
        jQuery.facebox('something cool');

        // Close Popup Hook
        $(document).bind('close.facebox', function() {
            alert("close action");
        });

    });
</script>

It looks ok but the problem is that it does not work perfectly:

On first popup, the close action displays an alert on close.
On Seconde popup, the close action displays TWO alerts.
On Third popup, the close action displays THREE alerts one after an other.

You get the point, it seems like the old ‘Query.facebox(‘something cool’);’ instances are still there listening for the close event.

Any way of fixing this ?
Thanks !

Answer 1

I did the following,

On the JS lib

$(this).trigger('pre_close.facebox');

---

// Close alert
$(document).bind('pre_close.facebox', function() {
    alert("close action");
    $(document).unbind('pre_close.facebox');
});

But that’s not too good since i have to hack the default facebox lib.