Neler yeni
Türkiye'nin En Güncel Forum Sitesi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı yada giriş yapmalısınız. Forum üye olmak tamamen ücretsizdir.

Animated Popup Elements (ing)

ByOnur58

Kayıtlı Üye
MFC Üyesi
  • Üyelik Tarihi
    7 Ocak 2015
  • Mesajlar
    2,113
  • MFC Puanı
    10
  • MFC Seviyesi

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>
 
Üst Alt