8

我通过调用打开弹出窗口

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

我只是想关闭弹出窗口。

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

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

4

8 回答 8

17

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

于 2012-05-04T04:55:40.127 回答
17

尝试

<a href='#' onclick='parent.$.colorbox.close(); return false;'>Close</a>
于 2012-10-31T13:26:26.623 回答
1 
$(document).ready(function(){

$.colorbox({

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

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

                    $.colorbox.remove();
                }
            });
    });
于 2012-05-02T02:49:29.067 回答
1

谢谢大家的意见。

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

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

于 2012-05-02T03:13:17.307 回答
1

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

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

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

于 2013-10-28T09:13:38.967 回答
0

在 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();
}
于 2012-05-02T02:28:32.583 回答
0

这对我有帮助

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

$("#CancelDeleteButton").click(function()
{
 $.fn.colorbox.close();
  return false;
});
于 2015-08-26T21:30:33.153 回答
0

如果您有以下条件，大多数答案都会起作用： 1. 同一域中的父级和子级 2. 子级具有 JQuery

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

在父母这样做：

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

        });
    });

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

 <input type="button" value="close" onclick="parent.postMessage('child frame', '*');" />
于 2016-03-02T06:56:43.330 回答