colorbox bug - close colorbox from a link or button

Question

I open the popup by calling

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

In notification.aspx I have

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

The popup was shown fine, but when I click the button it gives a JavaScript error.

In the main page's javascript I have

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

I am just trying to close the popup.

What am I missing? Thanks in advance.

EDIT: I got it working somehow, I'll find out what made it works.

Answer 1

$.colorbox.close() is the correct way to close colorbox, do not listen to these other comments. The problem is that you are loading colorbox a second time. Remove the jquery.colorbox.js script block from notification.aspx.

Answer 2

Try

<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

Thank you everyone for your comments.

This is really weird, but after fiddling around I found this does it

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

Hope it helps someone.

EDIT: Although that fixed the problem, the cause of the problem was I included jquery twice! (Thanks Jack)