colorbox bug - 从链接或按钮关闭 colorbox答案

【问题标题】：colorbox bug - close colorbox from a link or buttoncolorbox bug - 从链接或按钮关闭 colorbox
【发布时间】：2012-05-02 02:24:43
【问题描述】：

我通过调用打开弹出窗口

$.colorbox({ href: "notification.aspx" });

在 notification.aspx 我有

<script type="text/javascript" src="/scripts/colorbox/jquery.colorbox-min.js"></script>
...
<a id="btnClose">OK</a>

弹出窗口显示正常，但是当我单击按钮时，它给出了 JavaScript 错误。

在主页的 javascript 我有

$('#btnClose').live('click', function () {
  alert('closing...'); // Alert shown as expected
  $.colorbox.close(); // Nothing happens, no JavaScript error
  //$.fn.colorbox.close(); // same
  //parent.$.fn.colorbox.close(); // same
  //$.colorbox.remove(); // same
  //$('#cboxClose').click(); // same
  //$('#cboxOverlay').click(); // same
});

我只是想关闭弹出窗口。

我错过了什么？提前致谢。

编辑：我让它以某种方式工作，我会找出它的工作原理。

【问题讨论】：

标签： jquery colorbox

【解决方案1】：

$.colorbox.close()是关闭colorbox的正确方法，不要听这些其他cmets。问题是您第二次加载颜色框。从notification.aspx 中删除jquery.colorbox.js 脚本块。

【讨论】：

嗨，杰克，谢谢，但如果我从 notification.aspx 中删除它，它会说 $.colorbox 未定义
为什么会这样？您是否正在加载多个版本的 jQuery？你正在做你不应该做的事情，然后通过简单地再次加载库来解决问题。找出未定义 $.colorbox 的原因并解决它。
就是这样！！我没有意识到包括 jquery 两次！谢谢杰克！

【解决方案2】：

试试

<a href='#' onclick='parent.$.colorbox.close(); return false;'>Close</a>

【讨论】：

如果您在颜色框中使用 .iframe，这就是您需要的。父.$.colorbox.close();谢谢！

【解决方案3】：

$(document).ready(function(){

$.colorbox({

                inline:true,
                href:'notification.aspx',

                onClosed:function(){ alert('closing');                  

                    $.colorbox.remove();
                }
            });
    });

【讨论】：

我也试过了...没有任何效果这很奇怪...谢谢！

【解决方案4】：

感谢大家的cmets。

这真的很奇怪，但是在摆弄之后我发现它可以做到

$('#btnClose').live('click', function () {
  $.colorbox.remove(); // You have to remove it first (don't know why)
  $('#cboxClose').click(); // Then this will close the box, $.colorbox.close() still doesn't work
  $.colorbox.init(); // Re-init, otherwise colorbox stops working
});

希望对某人有所帮助。

编辑：虽然这解决了问题，但问题的原因是我两次包含 jquery！（谢谢杰克）

【讨论】：

查看我对您问题的回答。这是一种非常低效的处理方式。

【解决方案5】：

这可能对某人有所帮助。我创建了一个自定义关闭按钮。我的自定义关闭按钮位于右上角，也可以关闭。我的代码：

        jQuery(document).ready(function(){
        jQuery('<div id="close" style="cursor: pointer; position: absolute; top: 0; right: 30px;"><img src="../img/close.png" alt="close"/></div>').appendTo('.yourparentDiv');

        $("#close").click(function() {
            jQuery('#cboxClose').click();
        });
    });

我在关闭颜色框时遇到了问题。它帮助了我。

【讨论】：

这一行可能很有用：jQuery('#cboxClose').click(); 当其他一切都不起作用时。

【解决方案6】：

在 notification.aspx 你应该有

<a id="btnClose" href="javascript:closeBox();">OK</a>

在主页的 javascript 你应该有

<script type="text/javascript" src="/scripts/colorbox/jquery.colorbox-min.js"></script>
...
function closeBox() {
  $.colorbox.close();
}

【讨论】：

我试着把它放在弹出页面上，同样的事情。不过还是谢谢
同样的事情，什么也没有发生 :( 如果我把 return false 它重定向到一个带有文本“false”的空白页。请注意，我已经正确调用了该函数，因为警报工作正常。我只需要关闭颜色框。
很遗憾没有看到更多代码，我不知道该告诉你什么。最有可能的问题是 .js 文件被加载到错误的文件中和/或插件的代码执行不正确。

【解决方案7】：

这对我有帮助

// 3. 处理对话框取消按钮：

$("#CancelDeleteButton").click(function()
{
 $.fn.colorbox.close();
  return false;
});

【讨论】：

【解决方案8】：

如果您满足以下条件，大多数答案都会起作用： 1.父子在同一个域 2. 孩子有 JQuery

如果您想关闭子框并且您有这两个条件中的任何一个，请执行以下操作：

在父级中这样做：

$('document').ready(
    function () {
        window.addEventListener("message", function (event) {
            $.colorbox.close();

        });
    });

在孩子中添加一个关闭按钮，点击时带有以下js

 <input type="button" value="close" onclick="parent.postMessage('child frame', '*');" />

【讨论】：