单击按钮时关闭 jQuery 厚框答案

【问题标题】：Close jQuery thickbox on button click单击按钮时关闭 jQuery 厚框
【发布时间】：2012-07-06 06:56:52
【问题描述】：

这是我的 jQuery：

<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/thickbox.js"></script>
<script type="text/javascript"

$('#button').click(function(){
     $('#TB_window').fadeOut();
});

</script>

HTML：

  <input type="submit" id="button" value="clse" >

我试过这个功能，但它不起作用。

【问题讨论】：

Thickbox 有其内置方法。 tb_remove 只需在需要的地方调用此方法tb_remove();。它将正确关闭厚盒。阅读更多我在下面写的答案。 stackoverflow.com/a/21216272/1124612

标签： jquery thickbox

【解决方案1】：

Thickbox 有其内置方法。 tb_remove 只需在需要的地方调用此方法tb_remove();。它将正确关闭厚盒。

如果您使用 $('#TB_window').fadeOut(); ，TB_overlay DIV 将保持打开状态。如果你再次做一些像$('#TB_overlay').fadeOut(); 这样的废话，那么它会给你的厚盒带来问题。而thickbox将停止功能。

【讨论】：

一行来做：$('#TB_window, #TB_overlay').fadeOut();
请注意，如果 modal=true，tb_remove() 应该从厚框内容中调用。例如，<div id="myThickbox"><button onclick="tb_remove();">X</button></div> .

【解决方案2】：

这个解决方案对我有用，试试吧：

$(document).ready(function{
  $('#button').click(function(){
   self.parent.tb_remove();
  });
});

【讨论】：

【解决方案3】：

你必须阻止输入的默认事件的执行。将您的代码更改为：

$('#button').click(function(){
     $('#TB_window').fadeOut();
     e.preventDefault();
});

【讨论】：

添加一个 alert() 以便您可以检查该函数是否已执行。还要打印出 $('#TB_window') 的结果，看看这个选择是否返回了一个有效的结果。
如果您使用e.preventDefault() 可能会更好。 Stop misusing return false.

【解决方案4】：

如果你包含了thickbox.js，这很明显，那就试试吧.....

$('#closeTBWindow').click(tb_remove);

【讨论】：

我喜欢这个 sloution，因为它允许点击后重新打开。更新后的代码应该是：$('#TB_closeWindowButton').click();

【解决方案5】：

我建议使用“按钮”而不是“提交”，例如：

<input type="button" id="button" value="close" />

那么jQuery代码应该是：

$(document).ready(function{
  $('#button').click(function(){
   $('#TB_window').fadeOut();
  });
});

像这样，您不需要使用e.preventDefault()。
$(document).ready() 部分非常重要。没有这个 jQuery 会在按钮存在之前尝试将代码附加到按钮上，因此无法工作。

旁注：我喜欢将 DIV 元素用作按钮。

【讨论】：