Simple, small and fast CSS lightboxing for embedded web servers

Everyone is doing light-boxing effects now days.  You know what light-boxing is right?  Well, if you are new to the term, it is simply the display of content which is overlayed on top of a webpage.  When the pop-up overlay content is shown, the web-page in the background is grayed out so that the popup box appears “lighter” than the background web-page.

Light-Boxing using the major JavaScript libraries

There are numerous JavaScript libraries which have light-boxing functionality built in.  MooTools, JQuery, Prototype and YUI are just some of the more mainstream libraries.  If your web application needs all of the other features provided by one of these libraries and memory or processing power is no issue, then by all means, use one of the major library packages.  Those libraries have undergone extensive testing and have great cross browser compatibility and community support.  The libraries can range in size from 3Kb up to 100Kb or more.

Light-boxing for Embedded Web Servers

If you are looking for an extremely light-weight and fast method of executing a light-box effect, then you might not want one of the more fully featured libraries.  The main application space that I can see where one of the larger libraries might be impractical is in an embedded web-server, or when your primary web application clients are served over an extremely slow network connection.

An embedded web-server is a tiny web-server that is embedded in a device such as a router, power meter, set-top tv box or maybe even your refrigerator.  Most embedded devices have very limited internal storage space and limited processing power.  This means that every byte that is stored in the devices memory and transferred over its network connection is precious.  Firmware developers go to great lengths to compact the code in these devices in an effort to maximize the functionality while minimizing the cost.

Many embedded web servers are used to configure the device that the web server is hosted on.  I can see using light-boxing on the web interface for an embedded device to show help information, detailed sensor data, images or charts.

A working example:

Here is a working example of the CSS light-box: [download id=”10″]

Adjusting the positioning of the lightbox:

This example allows for dynamically sized light-boxes based on the content in the light-box div.  The example code does not center the light-box.

Light-box with CSS with minimal JavaScript

Here is how you can implement this CSS and minimal javascript light-boxing effect:



	
		A very simple lightbox example
		
	
	
        This is the main page content...
Click here to show the small lightbox
Click here to show the large lightbox

This tutorial and example code is provided by HenryRanch LLC.

 

Resources

Inspiration for this light-boxing approach came from here.  My improvements over the original authors approach make the light-box have rounded corners and handle dynamic sized content on the fly.