当一个ThickBox 关闭时，你将如何触发一个事件？答案

【问题标题】：How would you trigger an event when a ThickBox closes?当一个ThickBox 关闭时，你将如何触发一个事件？
【发布时间】：2011-05-23 01:28:53
【问题描述】：

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

【问题讨论】：

标签： jquery wordpress thickbox

【解决方案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/

【讨论】：

感谢您的代码。发现一个问题：图片上传thickbox好像多次调用tb_remove函数，导致我自定义的tb_remove函数中的代码被多次调用。关于如何解决这个问题的任何想法？
hmmm... 我会尝试找到解决它的方法。如果我发现了什么会发表评论...顺便说一句，您可以使用另一个库吗？
我有一些代码可以在此处重现 WordPress 中的问题：link。我正在尝试使用 WordPress 的内置图像上传器厚箱，但我遇到了这个问题。
想出了一个解决方案。通过使用每次调用函数时增加的计数器并将我的代码放入 if 子句中，该子句仅在计数器小于或等于 1 时执行，我能够将代码的执行减少到仅一次.唷

【解决方案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 被触发两次，因此这包括一些技巧，以确保您的代码不会第二次运行。

【讨论】：

【解决方案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

【讨论】：

完美运行！

【解决方案4】：

我认为您可以通过将点击处理程序绑定到关闭按钮来破解它：

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

如果您有选择，请摆脱thickbox（因为它不再维护）并使用社区更活跃的东西。厚箱网站，其实是proposes some alternatives^mirror。

【讨论】：

我想告诉他，但他必须重新绑定所有用于关闭厚框的元素（关闭按钮、点击覆盖和 espace 键）
但对替代方案 +1 :)
啊 - 我应该已经发现了。如果有兴趣，我从这里得到了关闭按钮单击处理程序的想法：designerfoo.com/…
是的，这是个好主意，我一开始就是这样做的。但是重新编写所有绑定将是一件痛苦的事情：D
不仅如此，还有其他方法可以关闭厚盒。你不能通过点击它外部来关闭它吗？

【解决方案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!');
    });
}

【讨论】：

这实际上是一个很好的答案。但是，tb_unload 不是指向thickbox 主页的源代码中的函数。但它在 WordPress 的版本中。指出这一点可能会有所帮助。此外，触发厚盒的是a 元素，而不是输入元素。最后，该示例不起作用，因为 Google 禁止以这种方式加载 .tb_unload 事件。也许是一个 jsfiddle 或 codepen 示例。

【解决方案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");
});

【讨论】：

【解决方案7】：

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

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

});

【讨论】：