[RESOLU][JS/CSS & IE] Opacité d'une div

[Hartycho]

Pour l'affichage d'une popup, je souhaite rendre le fond opaque. Tout fonctionne très bien sous Opera, mais ça ch*e sous IE6 ou 7...

Voilà le code javascript juste avant l'ouverture de la popup. Je fais un document.getElementById("masque").style.display='none'; à la fermeture de la popup (code non présent ici).

opacite = 0.7;
var masque = document.getElementById("masque");

/*rend le masque de fond transparent suivant les navigateurs */
masque.style.opacity = opacite; //navigateurs récents (firefox, opera, Safari>1,2...) css3
masque.style.MozOpacity = opacite; //anciennes versions firefox
masque.style.KhtmlOpacity = opacite; //Konqueror, Safari<1,2
masque.style.filter = "alpha(opacity=" + opacite * 100 + ")"; //Internet Explorer

/*affiche le masque, caché à la fermeture de la popup*/
masque.style.display = "block";

/*ouverture de la popup */
...

Dans mon code html j'ai mis :

<div id="masque"></div>

Et dans le css :

#masque {
position: fixed;
background-color: grey;
z-index:2;
height:100%;
width:100%;
/*display:none;*/
}

Le display:none est commenté car je voulais voir si comme ça IE m'affichait le calque.. et bien non :/ (Opera oui).

Si vous voyez d'où ça peut venir...

Merci de votre aide

[Yangzebul]

Salut.

var opacite = 0.7;
var masque = document.getElementById("masque");

/*rend le masque de fond transparent suivant les navigateurs */
if(masque.style.opacity) masque.style.opacity = opacite; //W3C
else if(masque.style.filter) masque.style.filter.alpha.opacity = opacite*100; //IE
else if(masque.style.MozOpacity) masque.style.MozOpacity = opacite; //Ffx
else if(masque.style.KhtmlOpacity) masque.style.KhtmlOpacity = opacite; //Konqueror Safari

/*affiche le masque, caché à la fermeture de la popup*/
masque.style.display = "block";

/*ouverture de la popup */
...

En fait la propriété filter de IE se comporte plus ou moins comme un objet (si tu as déjà taté les filtres as2, c'est un peu le même principe que le tableau filter), donc tu ne peux pas lui attribuer directement une string.

Chaque filtre est une propriété de l'objet filter.

Comme ça, ça devrait marcher mais il faudra peut-être débugguer un peu :

Quand une propriété n'est pas supporté elle renvoit selon les navigateurs : null, undefined ou une chaine de caractère vide. Toutes ces valeurs sont converties en la valeur booléenne false.

Si elle est supporté elle renvoit la valeur par défaut, en l'occurence "1" ou "alpha(opacity=100)" qui sont converties en true.

 

[Hartycho]

Merci de ta réponse.

En fait la propriété filter de IE se comporte plus ou moins comme un objet (si tu as déjà taté les filtres as2, c'est un peu le même principe que le tableau filter), donc tu ne peux pas lui attribuer directement une string.

Chaque filtre est une propriété de l'objet filter.

J'ai essayé dans IE avec juste cette ligne dans le javascript.

masque.style.filter.alpha.opacity = opacite*100; //Internet Explorer

Mais j'ai un "Error on page" (dans la barre des tâches tout en bas à gauche) et le code à la suite de cette ligne de s'exécute plus (notamment l'affichage de la popup).

Sur les sites que j'ai trouvé, c'était toujours écrit de cette manière

style.filter = "alpha(opacity=" + iOpacity * 100 + ")";

(source)

J'avais vu un site où la méthode utilisé était la même que la mienne, mais où ça fonctionnait très bien sous IE et sous Opera. J'ai donc dû oublier un truc, mais j'arrive pas à voir quoi

[Hartycho]

J'ai finalement trouvé d'où venait l'erreur.

IE ne connait pas la couleur "grey" dans le CSS... Je l'ai remplacé par "black" et ça fonctionne au poil.

[gvosnet]

J'ai finalement trouvé d'où venait l'erreur.

IE ne connait pas la couleur "grey" dans le CSS... Je l'ai remplacé par "black" et ça fonctionne au poil.

Peut-être tout simplement parce c'est "gray" et pas "grey"

[Yangzebul]

effectivement, je n'arrive pas à faire fonctionner la syntaxe "style.filter.alpha.opacity" je l'avais lu dans une source javascript il y'a quelque temps mais je ne l'avais pas testé moi même. Comme c'est la même quasi la même syntaxe que l'as ça m'avait semblé logique...

Bizarre faudrait que je retrouve où est-ce que j'avais vu ça.