<script type="text/javascript">// <![CDATA[
// Browser safe opacity handling function
function setOpacity( divid, value ) {  
 document.getElementById( divid ).style.opacity = value / 10;
 document.getElementById( divid ).style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeInMyPopup( divid ) {
  for( var i = 0 ; i <= 100 ; i++ )
  setTimeout( 'setOpacity("' + divid + '", ' + (i / 10) + ')' , 8 * i );
}
function fadeOutPopup( divid ) {
 for( var i = 0 ; i <= 100 ; i++ ) {
   setTimeout( 'setOpacity("' + divid + '", ' + (10 - i / 10) + ')' , 8 * i );
 }
 setTimeout('closeMyPopup( divid )', 800 );
}
function closeMyPopup( divid ) {
 document.getElementById( divid ).style.display = "none";
}
function launchMyPopup( divid ) {
 setOpacity( divid, 0 );
 document.getElementById( divid ).style.display = "block";
 fadeInMyPopup( divid );
}
// ]]></script>
<div id="popup1" style="width: 380px; height: 300px; display: none; position: absolute; top: 130px; left: 80px;">
<table border="0" cellspacing="0" cellpadding="0" width="380">
<tbody>
<tr>
<td><img src="/images/menubar_bg.png" alt="" width="356" height="23" /></td>
<td><a href="javascript:fadeOutPopup(&quot;popup1&quot;);"><img src="/images/window-close.png" border="0" alt="" width="24" height="23" /></a></td>
</tr>
<tr>
<td style="padding: 5px 10px; vertical-align: text-top; background: url(/images/popup_body.png) no-repeat scroll left top transparent; width: 380px; height: 277px;" colspan="2">
This is a test of the emergency pop up system.
If this were an actual emergency, you'd have been trampled. :-)</td>
</tr>
</tbody>
</table>
</div>
<input onclick="launchMyPopup('popup1')" type="submit" value=" Launch Popup1! " />