Example of a simple lightbox (modal) dialog with YUI
A lightbox (modal) dialog is an effective way to bring attention to an input form or important message.
You'll need the following YUI assets:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/container/assets/skins/sam/container.css">
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container-min.js"></script>
The easiest way to make a lightbox in YUI is to construct a YAHOO.widget.Panel and use .setBody to put in content:
var panel = new YAHOO.widget.Panel(
"panel", // The element id
{
width: "480px",
fixedcenter: true,
close: false,
draggable: false,
zindex: 4,
modal: true,
visible: false
}
);
panel.setBody("<p>Aliquam ultrices. Nulla dictum, augue et condimentum commodo.</p>");
panel.render(document.body);
panel.show();
One gotcha to keep in mind is that the class attribute of the page <body> must include yui-skin-sam. The yui-skin-sam class is necessary to provide:
Another gotcha with the example is that you cannot change the content after rendering (doing so will cause the close link to stop working). This has to do with associating an event handler with a DOM node and then destroying that node when you change the content. Event delegation is a good solution to this problem.
