Lightbox Without Framework

Design of a lightbox to present images, a message, a form to highlight it by darkening the rest of the page.
Without Ajax framework, with a few lines of code.
Scripts tested with Firefox, Chrome, Opera, Safari and Konqueror.

Lightbox in CSS

Two <div> are created, one for the filter that darkens the page, the other as a box container .
Just some CSS descriptors are required to create a lightbox.
It plays on the display:block and display:none properties to display or remove the box and the filter.

How to change the content

To change the content of the lightbox at the user request and depending on his choicer, a few lines of JavaScript must be added.
It includes a title in the bar and insert the content using DOM functions.

Using a lightbox to present images

The lightbox is redefined and simplified for displaying only images, which is the most common use in fact.
In this case you click on the image to close the box, that simplifies the design.

Make the lightbox compatible with older browsers

We must make the code more complicated to support legacy browsers.

Lightbox and Ajax: loading asynchronously the content

By adding an Ajax function - without using a framework - we can display images instantly in the box.

Fade in effect

For the lightbox appearing gradually, a fade in effect is added to the previous Ajax version.

A form in a lightbox

Presenting a form in a lightbox, possibly with a fade effect, should alleviate the inconvenience it is to fill it ...

© 2008-2022