<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 = document.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 = document.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> <style> .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>

 Kodu Kopyala

Hata Bildir | Tavsiye Et
 

Bu içeriğe oy verin: 1 2 3 4 5 6 7 8 9 10

Yorumlar / Yeni Yorum Yaz

	harika / Animated Popup Elements - Yok - 26.03.2019  / Cevapla
	eğer yazılarınızın yer kaplamaması için kullanabilirsiniz

1 - 26 arası / 1 toplam yorum