LightBox sample

This sample page shows how to use the LightBox user control to display various content types in front of a loaded page.

Try it here:

The Lightbox is another visual effect that uses the semi transparent feature available in the modern browsers.

Here is is used to simulate another layer of user interaction by hiding the existing elements of the page and bringing up new elements in front of them.

modal user interaction

This effect was found to be useful for implementing modal windows or modal dialogs.

Modal user interaction is very helpful when implementing some functionality that sometimes needs to ask the user in the middle of the implementation without breaking the usual program flow.

I'm sure that you are using this feature as well by using the alert() or prompt() methods. The JavaScript interpreter will stop executing until the opened window is closed by the user by choosing one of the available options.

There have been some discussions in the past whether modal user interactions are good or bad and especially in the apple era modal windows and dialogs where found to restrict the user's freedom.

Now with HTML pages true modal dialogs cannot be implemented any more. The Microsoft Internet Explorer offers a showModalDialog method that allows opening true modal windows. There are some tricks necessary to use this feature with dynamic build content, see http://weblogs.asp.net/datagridgirl/archive/2005/08/11/422309.aspx.

The Mozilla/Firefox offers a similar feature by using a special parameter in window.open, but you need some special privileges that are not available on the Internet to make it work.

Anyway it is all non-standard.

Lightbox implementations

You can find some implementations on the web:

http://www.blakems.com/archives/000075.html
http://www.huddletogether.com/projects/lightbox/
http://particletree.com/features/lightbox-gone-wild/

or just search the word "lightbox".

I implemented a ASP.NET User Control together with a client side JavaScript Behavior that implements the lightbox effect that can be used with embedded dialog elements.

The implementation has a extensibility model implemented so you can effectively show any kind of resource that is available. Pictures for example normally have no buttons or links but you need some elements in your dialog to close the dialog, show the next element or ...

All you need to use this visual effect is to include the lightbox user control:

<ve:LightBox ID="LightBox1" runat="server" />

There can only be one lightbox element on a page. The methods coming with the behavior are all usable by calling them directly on the jcl.LightBoxBehavior.

Elements that should be displayed on top of the page can be implemented very easily using a simple div-element with a given width and height:

<div id="HelloWorld" style="display:none;width:180px">
  <p>Hello world.</p>
  <button onclick="jcl.LightBoxBehavior.hide()">close</button>
</div>

It's a good idea to add some more style attributes to the outer <div> element to make it more look like a small dialog:

style="background-color:white;border: solid 2px #203050; padding: 2px;"

I've also implemented a more complex sample, a Image Slide Show. You can find the code in the implementation of this page by using the "View Source" link in the upper right corner of the page.

It is also implemented by using a JavScript Behavior and handles some keys by attaching to the keydown event.

Hello World Dialog

Hello world.

This page is part of the http://www.mathertel.de/ web site.