Kod:
<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>