Question

I would like to fire the following evens:

1. When submit button is clicked I would like to hide the form, perform an ajax request and display a message on success or on error for 1 second and then close colorbox.
2. Close colorbox if cancel button is clicked without doing anything fance.

Until now I managed to create the following demo:
http://jsfiddle.net/2YdbH/31/

ps: I am not sure how to do the perform step 1. I am showing the #message but I am not sure how to close colorbox after 1a second of showing #message. Additionally I dont know how to close colorbox when cancel is clicked.

Answer 1

First, give the buttons some identifying names then fire the appropriate actions onclick. To close colorbox (assuming we’re talking about the same one), use their close method like so:

$('#cancel').bind('click', function(){
    $.colorbox.close();
});
$('#submit').bind('click', function(){
    $.ajax({ /* AJAX OPTIONS  */});
    setTimeout("$.colorbox.close();",1000);
})