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: Light-box CSS with Minimal JavaScript (1061)

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>A very simple lightbox example</title>
		<style>
		.main_dark_overlay{
			display: none;
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index:1001;

			-moz-opacity: 0.6;
			opacity:.60;
			filter: alpha(opacity=60);
		}
		.lightbox_content {
			display: none;
			position: fixed;

            margin-top: 10%;
            margin-bottom: 10%;
            margin-left: 10%;
            margin-right: 10%; 

			padding: 10px;
			border: 10px solid black;
			background-color: white;
			z-index:9999;
			overflow: auto;

			border-radius: 20px;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			-o-border-radius: 20px;
		}
	</style>
	</head>
	<body>
        This is the main page content...<br>
		<a href = "javascript:void(0)" onclick = "document.getElementById('lightbox-small').style.display='block';document.getElementById('main').style.display='block'">Click here to show the small lightbox</a><br>
        <a href = "javascript:void(0)" onclick = "document.getElementById('lightbox-large').style.display='block';document.getElementById('main').style.display='block'">Click here to show the large lightbox</a><br>
        <br>This tutorial and example code is provided by <a href="http://henryranch.net/tutorials/simple-small-fast-css-lightboxing-for-embedded-web-servers/">HenryRanch LLC</a>.<br>

        <div id="lightbox-small" class="lightbox_content">
			Hello World!<br>This is the small pop-up lightbox content.<br>
            <img src="http://henryranch.net/wp-content/uploads/2009/10/docDisplay-150x150.jpg"><br>
            This tutorial and example code is provided by <a href="http://henryranch.net/tutorials/simple-small-fast-css-lightboxing-for-embedded-web-servers/">HenryRanch LLC</a>.<br><br>
            <a href = "javascript:void(0)" onclick = "document.getElementById('lightbox-small').style.display='none';document.getElementById('main').style.display='none'" title="click to close the lightbox">X</a><br>
		</div>

        <div id="lightbox-large" class="lightbox_content">
			Hello World!<br>This is the large pop-up lightbox content.<br>
            <img src="http://henryranch.net/wp-content/uploads/2009/10/docDisplay-150x150.jpg"><br>
            "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"<br>
            <br>This tutorial and example code is provided by <a href="http://henryranch.net/tutorials/simple-small-fast-css-lightboxing-for-embedded-web-servers/">HenryRanch LLC</a>.<br><br>
            <a href = "javascript:void(0)" onclick = "document.getElementById('lightbox-large').style.display='none';document.getElementById('main').style.display='none'" title="click to close the lightbox">X</a><br>
		</div>

		<div id="main" class="main_dark_overlay"></div>
	</body>
</html>

 

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.