点击本身关闭彩盒

Question

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

我在点击链接

时显示隐藏的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();
   });

这两个选项都会出错： “未捕获的TypeError：无法调用未定义的方法'close'”

从页面的视图来源，我可以在头部

中看到下面的库

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

我在这里错过了什么吗？

Answer 1

试试这个：

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

Answer 2

你写的

  

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

我假设颜色框本身的任何地方表示显示的弹出窗口。假设你的第一次尝试已经结束了。

请改为尝试：

1. 继续使用$ .colorbox.close（）;
2. 不要在#pop_box
上放置点击事件
3. 相反，将它放在ColorBox用于包装显示内容的选择器
中
4. 在实例化ColorBox之前，您必须将代码放在调用页面上。

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

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

});

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

预期结果是：点击“组1”中显示的照片现在发出警报，然后关闭彩盒。

Answer 3

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

关闭彩盒

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

参考：This post

谢谢！