单击自身时关闭颜色框答案

【问题标题】：Closing colorbox on clicking itself单击自身时关闭颜色框
【发布时间】：2013-12-02 20:40:38
【问题描述】：

当我单击颜色框本身的任意位置时，如何关闭颜色框？

点击链接时，我将隐藏的 div 显示为颜色框

<div style="display: none">
  <div id="pop_box">
  Content goes here...
  </div>
</div>

打开颜色框的链接

<a id="seeTheOffer" target="_blank"> advertisement </a>

JQuery 打开颜色框

$("#seeTheOffer").colorbox({ inline: true, height: "420px", href: "#pop_box" });

这是我迄今为止所尝试的。

选项 1：

$("#pop_box").click(function()
   {
     $("#seeTheOffer").colorbox.close();
   });

选项 2：

$("#pop_box").click(function()
   {
     parent.jQuery.colorbox.close();
   });

这两个选项都会出错： “未捕获的类型错误：无法调用未定义的方法‘关闭’”

从页面的视图源中，我可以看到下面的库在 head 部分中被引用

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
jquery.colorbox.js (local copy)
colorbox.css (local copy)

我错过了什么吗？

【问题讨论】：

【解决方案1】：

试试这个：

$("#email_popup_content").click(function(){
     $.fn.colorbox.close();
});

【讨论】：

【解决方案2】：

你写的

当我单击颜色框本身的任意位置时，如何关闭颜色框？

我假设 颜色框本身的任何位置 表示在显示的弹出窗口上。假设您的第一次尝试很接近。

试试这个：

这是一些使用愚蠢警报作为验证设备的代码::

$('#cboxWrapper').on('click', function() {
     alert('I am going to close Colorbox');
     $.colorbox.close();

});

$(".group1").colorbox({rel:'group1'});

预期结果是：单击“组 1”中显示的照片现在会发出警报，然后关闭颜色框。

【讨论】：

该解决方案非常合乎逻辑，应该可以工作。但是，我在单击时收到警报，但随后出现以下错误“未捕获的类型错误：无法调用未定义的方法'关闭'”可能是由于库的某些冲突吗？我已经用我包含的库更新了我的帖子。
在 Chrome 中，当我点击错误链接时，它指向语句 $.colorbox.close();带有消息“未捕获的类型错误：无法调用未定义的方法‘关闭’”未找到其他详细信息。
也许吧。更有可能存在 javascript 范围问题。如果弹出窗口中显示的内容在新的浏览器窗口或选项卡中打开，并且颜色框不在该页面上，则不会找到它并导致此类错误。使用 Chrome 的开发工具，从控制台输入 $.colorbox。在您的两个页面上执行此操作。这将证明弹出页面上是否缺少颜色框。

【解决方案3】：

感谢 Kevin 和 Hiral 的正确指导。最后我能够使用

关闭颜色框

$('#cboxClose').click();

谢谢！

【讨论】：