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:

• using a click event to trigger it
• inserting it into the DOM immediately after its triggering link
• adding a button inside the dialog to close it again, which is also triggered by a click event, and sets focus back on the original trigger
• adding a supplementary key event, so the dialog can be closed by pressing Escape

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:

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