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.
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.
You can find some implementations on the web:
or just search the word "lightbox".
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 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;height:140px"> <p>Hello world.</p> <button onclick="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;"
A small Image Slide Show
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.
See it in action at: http://www.mathertel.de/AJAXEngine/S04_VisualEffects/LightBoxDemo.aspx