Question

我通过调用

打开弹出窗口

$.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
});

我只想关闭弹出窗口。

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

编辑：我以某种方式工作，我会发现是什么使它有效。

Answer 1

$.colorbox.close()是关闭彩盒的正确方法，不要听这些其他评论。问题是你第二次加载彩盒。从jquery.colorbox.js删除notification.aspx脚本块。

Answer 2

尝试

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

Answer 3

$(document).ready(function(){

$.colorbox({

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

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

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

Answer 4

感谢大家的评论。

这真的很奇怪，但在摆弄后我发现这样做了

$('#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两次！（谢谢杰克）

Answer 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();
        });
    });

关闭彩盒时我遇到了问题。它帮助了我。

Answer 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();
}

Answer 7

如果您有以下条件，大多数答案都会有效： 1.同一领域的父母和子女 2. child有JQuery

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

父母中的

执行此操作：

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

        });
    });

在子项中

添加一个关闭按钮，点击

并显示以下js

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

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

7 个答案: