Developer Checklist — JavaScript Appendices

Correct code

JS_C_A10: Create custom dialogs in a device independent way and JS_C_A12: Use progressive enhancement to open custom dialogs on user request

This example shows how progressive enhancement can be used to create a custom dialog. In this case the trigger is an image link, and the dialog is an image viewer (sometimes known as a lightbox) which contains a larger, captioned version of the image, and also has a Close button.

The dialog is triggered only by user request, and is implemented in a device-independent way:

The triggering link has a fallback href that points to the larger image, so it can still be viewed if JavaScript is unavailable. The dialog's caption is copied from the original thumbnail's ALT text, information which is still available if the image or lightbox can't be viewed.

Live Demo

Click anywhere in the thumbnail or its surrounding box, and a lightbox will appear with a larger version of the image:

It took 20kg of soft builders' sand, an old-fashioned wooden chest and some inflatable palm-trees, to create an indoor beach in my bathroom! Click to enlarge

JavaScript Code

The JavaScript code for this example can be found in: JS_C_A10-A12.js

The CSS for this example can be found in: JS_C_A10-A12.css