Effet Fade [Méthode Simple]

[theptitprince]

Je viens de coder le même type de fonction pour mon jeu (et non, j'ai toujours pas abandonné mon projet, même si ça fait trééééés longtemps que je suis pas passé par ici).
Pour info, j'ai créé ce code pour l'apparition et la disparition de message d'avertissement.

Donc voila:
Le javascript

Code :

var show = 0;

function popup(page){
    if(show == 0){
        xhr(page, 'popup_container');
        document.getElementById("popup_background").style.visibility = "visible";
        document.getElementById("popup_block").style.visibility = "visible";
        for (var i=0;i<101;i++){
            setTimeout('opacity_popup('+i+')',1.5*i);
        }
    }else{
        for (var i=0;i<101;i++){
            setTimeout('opacity_popup('+i+')',1.5*i);
        }
    }
}

function opacity_popup(value){
    if(show==1){
        val = 100 - value;
    }else{
        val = value;
    }
    document.getElementById("popup_background").style.opacity = val/125;
    document.getElementById("popup_background").style.filter = 'alpha(opacity=' + val*0.125 + ')';
    document.getElementById("popup_block").style.opacity = val/100;
    document.getElementById("popup_block").style.filter = 'alpha(opacity=' + val*1 + ')';
    if(value==100){
        if(show==0){
            show=1;
        }else{
            show=0;
            document.getElementById("popup_background").style.visibility = "hidden";
            document.getElementById("popup_block").style.visibility = "hidden";
        }
    }
}

Le css (simplifié):

Code :

#popup_block{ visibility:hidden; background: #fff; padding: 5px; border: 12px solid #ddd; font-size: 1.2em; position: fixed; left:50%; top:130px; margin-left: -220px; margin-top: -60px; width:440px; min-height: 100px; opacity:0; filter:alpha(opacity=0) }
#popup_background{ visibility:hidden; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity:0; filter:alpha(opacity=0) }
#popup_block #btn_close { float: right; margin: -30px -30px 0 0; width:40px; height:40px }

Et le html:

Code :

<!-- DIV DE MESSAGE D'ALERTE -->
        
    <div id="popup_background"></div>
    <div id="popup_block">
        <a href="#" onclick="popup()"><img src="style/close_pop.png" id="btn_close" /></a>
        <div id="popup_container"></div>
    </div>
    
    <!-- FIN DU DIV DE MESSAGE D'ALERTE -->

Aprés, pour faire afficher le message d'alerte, il suffit de faire un appel à la fonction popup("page a afficher dans le popup").
Je voulais un rendu proche de Facebook. Voila le rendu en image:

  Capture d’écran 2011-11-05 à 19.06.17.png (Taille : 66,41 Ko / Téléchargements : 14)

Peut être cela aidera quelqu'un qui en a besoin