How would you trigger an event when a ThickBox closes?

Question

This question is Semi-related to Wordpress, but has applications elsewhere. Basically, I'm trying to make it so when someone exits out of a Thickbox, it triggers an event elsewhere on the page. Editting the Thickbox file isn't an option.

Answer 1

It's a bit complicated since Thickbox isn't written that way. But maybe you can use some tricks to do it.

It's not the recommended solution but you can "rewrite" the close function. Something like:

var old_tb_remove = window.tb_remove;

var tb_remove = function() {
    old_tb_remove(); // calls the tb_remove() of the Thickbox plugin
    alert('ohai');
};

Works \o/ http://jsfiddle.net/8q2JK/1/

Answer 2

You can try something like this...

var tb_unload_count = 1;
$(window).bind('tb_unload', function () {
    if (tb_unload_count > 1) {
        tb_unload_count = 1;
    } else {
        // do something here
        tb_unload_count = tb_unload_count + 1;
    }
});

tb_unload is triggered twice so this includes a bit of a hack to make sure your code doesn't run the second time.

Answer 3

Not sure if this is a global solution, but for WordPress, at least for the latest version (4.9.5), you can use:

jQuery( 'body' ).on( 'thickbox:removed', function() {
    // Your code here.
});

In Thickbox v3.1, tb_remove() calls:

jQuery( 'body' ).trigger( 'thickbox:removed' );

See: https://github.com/WordPress/WordPress/blob/master/wp-includes/js/thickbox/thickbox.js#L290

Answer 4

You can bind a listener to the "tb_unload" which triggers on when the thickbox is closed. Example using jQuery:

<input id="tb_button" type="button" value="Click to open thickbox" />

jQuery('#tb_button').on('click', function(){
      tb_show('This is Google in a thickbox', 'http://www.google.com?TB_iframe=true');
      jQuery('#TB_window').on("tb_unload", function(){
        alert('Triggered!');
    });
}

Answer 5

On Thickbox 3.1, I will go inside thickbox-fixed.js and will add a custom function for myself

just to add a callback function, not sure is a good way, but its work for my project.

function mycustom_tb_remove(callback) {
  $("#TB_imageOff").unbind("click");
  $("#TB_closeWindowButton").unbind("click");
  $("#TB_window").fadeOut("fast",function(){
    if(callback)callback();
    $('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();
  });
  $("#TB_load").remove();
  if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
    $("body","html").css({height: "auto", width: "auto"});
    $("html").css("overflow","");
  }
  document.onkeydown = "";
  document.onkeyup = "";
  return false;
}

So when I use my custom remove's function. I will use it this way.

self.parent.mycustom_tb_remove(function(){
    alert("Closed");
});

Answer 6

I wanted to trigger an event when thick box is opened I was able to do it this way: ( hope it helps someone )

jQuery( 'body' ).on( 'thickbox:iframe:loaded', function ( event ) {
//Your trigger code here.

});

Answer 7

I think you can hack that by binding a click handler to the close button:

$("#TB_closeWindowButton").click(function() {
    doSomething();
});

If you have a choice, get rid of thickbox (as it is no longer maintained) and use something with a more active community. The thickbox site, in fact, proposes some alternatives ^mirror.