The excellent and rather flexible jQuery plugin FancyBox has become my defacto jQuery lightbox implementation and as such it has found its way into most of my project work.

Although you can obviously close the displayed lightbox by either clicking outside of the box (i.e. on the greyed out area) or by clicking on the Close icon/button on the border of the lightbox, it is sometimes useful to be able to close the FancyBox by clicking on a button or element being displayed within the dialog – in other words when the FancyBox is being used to display iframe content.

Now the API for FancyBox reveals the existence of a close() function, which is called as follows:

$.fancybox.close();

This is useful when you want to programmatically close the lightbox, say after a certain period of time has elapsed – or in our case, when a button displayed in the dialog is clicked on.

However, there is one little trick that has to be employed here. Because the button sits within the FancyBox already launched, you need to ask its parent window to actually run the close function to shut it down.

Hence, your call from the displayed iframe content would look like:

if (typeof window.parent.$.fancybox!='undefined'){
           window.parent.$.fancybox.close();
         }

Nifty.

Related Link: http://fancybox.net