【问题标题】: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" })
    

    【讨论】:

      猜你喜欢
      • 2014-07-21
      • 2022-06-30
      • 2016-04-01
      • 1970-01-01
      • 2018-09-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多