I want to display simple confirmation popup box if a user tries to close colorbox. I tried this code:

onCleanup:function(){ confirm('Are you sure'); }

It displays confirmation box but colorbox is closed even if I click "Cancel"!

Can anyone please help?

I want to display simple confirmation popup box if a user tries to close colorbox. I tried this code:

onCleanup:function(){ confirm('Are you sure'); }

It displays confirmation box but colorbox is closed even if I click "Cancel"!

Can anyone please help?

• javascript
• colorbox

4 Answers 4

There already is a nice example in the FAQ of colorbox

You have to redefine colorbox' close method:

var originalClose = $.colorbox.close;
$.colorbox.close = function(){
  if (confirm('Do you want to close this window?')) {
    originalClose();
  }
};

I've done something similar with FancyBox. I think your best bet is to bind an event handler to the close button when the ColorBox is displayed:

onComplete:function(){
  $("#cboxClose").click(function(e) {
    // stop any other script from firing
    e.stopPropagation(); 
    if (confirm('Are you sure')) {
      $.colorbox.close();
      // ensure that the binding is removed when closed
      $("#cboxClose").unbind();
    }
  });
}

@Ken, your example worked perfectly for me...almost. The only modification that I had to make was to unbind before setting the click function because for some reason, it would ignore my if statement and still close on first load. Below is what I have put into use for a confirmation on closing a colorbox

$(".Add").colorbox({
    onComplete:function(e){
       $("#modalForm").ajaxForm(modalOptions);
       $("#cboxClose").unbind(); 
       $("#cboxClose").click(function(e){
          e.stopPropagation();
          if(confirm('Are you sure you want to cancel your changes?')){
             $.colorbox.close();
             $("#cboxClose").unbind();                               
          }                           
       }); 
    }
   });

I do not know if colorbox allows to cancel the closing once you have started it ..

If it did, though, you would need to change your code to

onCleanup:function(){ return confirm('Are you sure'); }