通过单击模式窗口中的锚链接关闭彩盒模式窗口？答案

【问题标题】：Close colorbox modal window by clicking anchor link within modal window?通过单击模式窗口中的锚链接关闭彩盒模式窗口？
【发布时间】：2011-11-22 03:11:38
【问题描述】：

我已经创建了一个锚链接 - 我正在尝试创建它，以便当我单击此锚链接（包含在颜色框模式窗口中）时，它将关闭颜色框。

$(document).ready(function(){
     $('.newWindow a').click(function(){
          alert('hello world'); // checking to be sure click function is being called
         $.fn.colorbox.close(); 
     });
 });

我认为这会起作用..我做错了什么？

colorbox中加载的内容是页面上隐藏的div，而不是iframe。

编辑：我不知道为什么它不起作用。我看过别人的例子，它和我的一样放在一起。我注意到，当单击透明 div 以使用颜色框提供“景深”时，模式窗口将淡出/关闭。所以我把代码改成：

 $(document).ready(function(){
     $('.newWindow a').click(function(){
         $('#DOMWindowOverlay').click(); // click overlay div and close colorbox
     });
 });

不是真正的修复 - 这是一种解决方法.. 但它有效！

【问题讨论】：

标签： jquery colorbox

【解决方案1】：

.fn 是干什么用的？

试试

$.colorbox.close()

【讨论】：

试一试，仍然没有骰子。虽然事后马上想出了答案。很奇怪把它放在这里让我对这个问题有了不同的看法。
很好，我认为您的解决方案无论如何都应该有效。看看jsfiddle.net/uqnz9
奇怪..我猜页面上的某些东西干扰了它正确关闭。

【解决方案2】：

它不起作用，因为在运行 docReady 时链接不存在。将来，您可以做以下两件事之一：A）将您的点击处理程序放在 jquery live() 函数中（仍在 docReady 中），或 B）使用 colorbox 的 onComplete 选项来创建点击处理程序（放置在您的对象文字中创建颜色框时发送）。

此外，正如 Thorsten 所指出的，.fn 部分不是必需的，因为 colorbox 的作者有先见之明，创建了指向 $.colorbox 的链接。

【讨论】：

你的第一句话对吗？问题作者说“加载在颜色框中的内容是页面上的隐藏 div，而不是 iframe”，这意味着链接在页面上，其中包含 ColorBox 调用。
@Kevin M：谢谢凯文，我错过了。当然你是对的，如果它已经在页面中，那么 docReady 会得到它。此外，我刚刚使用原始代码（在帖子的最顶部）进行了快速测试，并获得了关闭颜色框的链接，没有问题。如果 kyle 回来检查，也许他可以给我们更多信息或者说是什么搞混了？

【解决方案3】：

Kyle，我觉得这很好。通过在事件处理程序中返回 false 或使用 preventDefault 方法，确保您还取消了锚点的默认操作。例如：

 $('.newWindow a').click(function(){
     $.colorbox.close();
     return false;
 });

可以使用.fn，（这是访问 jQuery 插件方法的标准方法），但任何颜色框都不需要。

【讨论】：

杰克！男人！添加您的 Colorbox 极大地改善了我的作品的外观。谢谢。

【解决方案4】：

只要放锚onclick="$('#registerDialog').dialog('close');">

registerDialog 是模态对话框 id，就像这里的 data_dialog_id

@Html.ActionLink("Register", "Register", "Account", null, 
    new { @class = "openDialog",
          data_dialog_id = "**registerDialog**", 
          data_dialog_title = "btewary.blogspot.in" })

【讨论】：