Find Motive

This is a follow up post to an article I wrote a few weeks ago about Lightbox Using iFrames Instead of AJAX.

That article described how to use an iFrame to display content in a Lightbox without using AJAX. There are advantages to this and you can read about them at the link above.

Traditionally a Lightbox could be closed using the code below:

This code will only work if the link is being called from the same window that the lightbox is defined in, which presents a problem with our iFrame Lightbox because the iFrame is a separate window and knows nothing about the Lightbox defined in the parent.

Two parts are required to achieve closing a Lightbox from an iFrame. The first is a JavaScript function in the parent that can be called from the child window(iframe).

Parent Code

The second is the call in the child window to the parent function closeLightbox

iFrame(child) Code

Throw the above code into a link or button click and the Lightbox will be closed.

Download Complete Source (includes demo)
lightbox-iframe2.zip (15k)

Special thanks to Manuel Ribeiro. This code is based off of his implementation.

I've been using the Lightbox Gone Wild hack of Lightbox on Indiefy to give the user experience more of an "application" feel. I like the users focus being brought to one area and not allowing them to do anything else until the current task is done.

For those of you who don't know what Lightbox is check out the original version here for more information.

Particle tree's hack of Lightbox allows other content besides images to be put into a Lightbox, but it uses AJAX to pull the content into the box. For my purposes this is overkill because an AJAX call is loading an iFrame which results in 2 HTTP requests and for forms inside a lightbox this won't function the way I want. I want the form to act separately from the current page so the user will not be redirected when the form is submitted. To me this gives the UI a smoother feel. Here is the code section that I modified.

Code

I completely removed the processInfo function since it was no longer needed. The new loadInfo function is basically the modified code from processsInfo to write an iFrame instead of using AJAX. This will still take the href from the activating link and use that as the iframe's source URL. I hope this helps!

Download Complete Source (includes demo)
lightbox-iframe.zip (15k)

NOTE: The original version of Lightbox does NOT use AJAX. This code is based off of Particle Tree's lightbox implementation which DOES use AJAX. Some people were confused by this.