Animated Popup Elements (ing)

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: HunBug | http://www.astral-consultancy.co.uk/ */

var fadeOpacity  = new Array();
var fadeTimer    = new Array();
var fadeInterval = 100;  // milliseconds

function fade(o,d) {
  // o - Object to fade in or out.
  // d - Display, true =  fade in, false = fade out

  var obj = ********.getElementById(o);

  if((fadeTimer[o])||(d&&obj.style.display!='block')||(!d&&obj.style.display=='block')) {
    if(fadeTimer[o])
      clearInterval(fadeTimer[o]);
    else
      if(d) fadeOpacity[o] = 0;
      else  fadeOpacity[o] = 9;
  
    obj.style.opacity = "."+fadeOpacity[o].toString();
    obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";
    
    if(d) {
      obj.style.display = 'block';
      fadeTimer[o] = setInterval('fadeAnimation("'+o+'",1);',fadeInterval);
    } else
      fadeTimer[o] = setInterval('fadeAnimation("'+o+'",-1);',fadeInterval);
  }
}

function fadeAnimation(o,i) {
  // o - o - Object to fade in or out.
  // i - increment, 1 = Fade In

  var obj = ********.getElementById(o);
  fadeOpacity[o] += i;
  obj.style.opacity = "."+fadeOpacity[o].toString();
  obj.style.filter  = "alpha(opacity="+fadeOpacity[o].toString()+"0)";

  if((fadeOpacity[o]=='9')|(fadeOpacity[o]=='0')) {
    if(fadeOpacity[o]=='0')
      obj.style.display = 'none';
    else {
      obj.style.opacity = "1";
      obj.style.filter  = "alpha(opacity=100)";
    }

    clearInterval(fadeTimer[o]);
    delete(fadeTimer[o]);
    delete(fadeTimer[o]);
    delete(fadeOpacity[o]);
  }  
}
</script>

*********
.demoPopup {
  border: solid 1px #333;
  font-family: Tahoma;
  font-size: 12px;
  display: none;
  position: absolute;
  width: 300px;
  z-index: 60;
}

.demoPopuptitle {
  background: blue;
  color: white;
  font-weight: bold;
  height: 15px;
  padding: 5px;
}

.demoPopupbody {
  background: #ddd;
  padding: 5px;
  text-align: center;
}

#demoPopup1 {
  top: 100px;
  left: 50px;
}

#demoPopup2 {
  top: 100px;
  left: 400px;
}
</style>


<input type="button" value="Show Popup 1" onClick="fade('demoPopup1',true);">
<input type="button" value="Show Popup 2" onClick="fade('demoPopup2',true);">

<div id="demoPopup1" class="demoPopup">
  <div class="demoPopuptitle">Fade Popup 1</div>
  <div class="demoPopupbody">
    <p>Press close to fade out this popup</p>  
    <input type="button" value="Close" onClick="fade('demoPopup1',false);">
  </div>
</div>

 <div id="demoPopup2" class="demoPopup">
  <div class="demoPopuptitle">Fade Popup 2</div>
  <div class="demoPopupbody">
    <p>Press close to fade out this popup</p>  
    <input type="button" value="Close" onClick="fade('demoPopup2',false);">
  </div>
</div>