How to Check if jQuery’s ColorBox is Open or Closed

jQuery’s ColorBox is one of my favourite and most used jQuery plugins. It’s simple to set up, looks great, very customisable and the website contains examples to cover every scenario you could imagine.

One thing that I couldn’t achieve right away however was how to get the current state of the ColorBox at any one time. Was it open? Was it closed? After a bit of playing around I discovered that the plugin creates an element with an ID of ‘colorbox’. By using this, combined with jQuery, I could then easily detect the current state by doing something like so:

if ($("#colorbox").css("display")=="block") {
alert('ColorBox is currently open');
}else{
alert('ColorBox is currently closed');
}

So there we have it. Simple huh? An another alternative is that you use the callback functionality of ColorBox and update a global JavaScript variable each time it is opened and closed, but I’ll save that for another day…