当 ThickBox 关闭时，如何触发事件？

Question

这个问题与 WordPress 半相关，但在其他地方也有应用。基本上，我试图做到这一点，以便当有人退出 Thickbox 时，它会触发页面其他位置的事件。编辑 Thickbox 文件不是一个选项。

Answer 1

这有点复杂，因为 Thickbox 不是这样写的。但也许你可以使用一些技巧来做到这一点。

这不是推荐的解决方案，但您可以“重写”关闭函数。类似于：

var old_tb_remove = window.tb_remove;

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

工作 \o/ http://jsfiddle.net/8q2JK/1/

Answer 2

您可以尝试这样的操作...

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 被触发两次，因此这包括一些黑客操作，以确保您的代码不会第二次运行。

Answer 3

不确定这是否是一个全局解决方案，但对于 WordPress，至少对于最新版本（4.9.5），您可以使用：

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

在 Thickbox v3.1 中，tb_remove() 调用：

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

请参阅：https://github.com/WordPress/WordPress/blob/master/wp-includes/js/thickbox/thickbox.js#L290

Answer 4

我认为您可以通过将点击处理程序绑定到关闭按钮来解决这个问题：

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

如果您有选择，请摆脱厚盒（因为它不再维护）并使用社区更活跃的东西。事实上，thickbox 网站提出了一些替代方案 ^镜像。

Answer 5

您可以将侦听器绑定到“tb_unload”，该侦听器会在厚盒关闭时触发。使用 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 6

在厚盒 3.1 上，
我将进入thickbox-fixed.js
并会为自己添加一个自定义函数，

只是为了添加一个回调函数，不确定是不是一个好方法，但它对我的项目有用。

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;
}

所以当我使用自定义删除功能时。我会这样使用它。

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

Answer 7

我想在打开厚盒子时触发一个事件我可以这样做：（希望它对某人有帮助）

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

}）；