Popup javascript avec apparition du fond en fondu

comment faire ?

Vous devez être inscrit pour pouvoir poster des messages

Résolu Le problème de ce sujet a été résolu

Auteur	Message
Page : 1
1 visiteur sur ce sujet (1 anonyme)
Page : 1
Samoht	# Posté le 13/02/2008 à 06:59:47
Détermination=>Réussite Groupe : Membres	Salut à tous ! Je voudrais faire une apparition d'une fausse popup en javascript (qui n'ouvre pas une nouvelle page, elle vient juste en premier plan sur la page) sur une page mon site, avec comme fond noir transparent (pour que l'on voit derrière). Seulement, est-il possible de pouvoir faire apparaitre le fond progressivement, en fondu ? Merci pour votre réponse Ps : je code en php, xhtml, xmlhttprequest, javascript, et en css. Un programmateur du dimanche fais un site internet, ça donne ça !
aenario	# Posté le 13/02/2008 à 09:25:48
Groupe : Membres	c'est possible en javascript : tu utilise la fonction setInterval pour relancer une même fonction JS à intervalles régulier (0.1s par exemple), dans cette fonction, tu fais varier les paramètres CSS comme ceci : -moz-opacity:0.2; opacity: 0.2; filter:alpha(opacity=20); Bon code -- Aenario -- Moi élitiste ! Et oui, j'aime pas les cons
Samoht	# Posté le 13/02/2008 à 17:52:06
Détermination=>Réussite Groupe : Membres	Cool !! Mais c'est pas incompatible avec les autres navigateurs que Firefox (le moz-opacity) ? Un programmateur du dimanche fais un site internet, ça donne ça !
aenario	# Posté le 14/02/2008 à 18:43:17
Groupe : Membres	si, c'est pour ça que tu combine les trois propriétés -moz pour Firefox seulement opacity qui est le standart CSS3 pour les navigateurs les plus récents et futurs filter:opacity pour IE je crois qu'il y a aussi -khtml-opacity pour konqueror et safari, à vérifier... -- Aenario -- Moi élitiste ! Et oui, j'aime pas les cons
Samoht	# Posté le 14/02/2008 à 19:00:12
Détermination=>Réussite Groupe : Membres	Maaa excellent !! On les utilise en css, mais a-t-on besoin de mettre des trucs comme "!important" ? Un programmateur du dimanche fais un site internet, ça donne ça !
cbasile06	# Posté le 14/02/2008 à 21:00:45
Je pompe, donc je suis Groupe : Membres	-khtml-opacity pour konqueror et safari en effet, c'est le même que -moz-opacity pour mozilla. Et pas besoin de !important, par contre c'est pas vraiment en CSS mais en javascript (dans le style de l'objet) Plus ça rate, plus il y a de chances que ça marche (Professeur Shadoko) S'il n'y a pas de solution, c'est qu'il n'y a pas de problème! (Un shadok anonyme) Pourquoi faire simple quand on peut faire compliqué !? (Un autre shadok anonyme)
Samoht	# Posté le 15/02/2008 à 18:51:49
Détermination=>Réussite Groupe : Membres	J'ai fais le code suivant : Code : JavaScript - Afficher / masquer les numéros de ligne function mfkt(cible, i) { i++; document.getElementById(cible).style.-moz-opacity=i; document.getElementById(cible).style.-khtml-opacity=i; document.getElementById(cible).style.opacity=i; document.getElementById(cible).style.filter='alpha(opacity='+i*100+')'; setTimeout("mfkt("+cible+", "+i+")",1000); } Comment faire pour le "-moz-opacity" et le "-khtml-opacity" pour déboguer les tirets ? Un programmateur du dimanche fais un site internet, ça donne ça !
cbasile06	# Posté le 15/02/2008 à 19:01:26
Je pompe, donc je suis Groupe : Membres	element.style.MozOpacity = i; element.style.KhtmlOpacity = i; (au lieu d'écrire -lettre, tu écris Lettre). Au passage, pour le filter, ça marche, mais il vaut mieux utiliser element.filter.opacity Plus ça rate, plus il y a de chances que ça marche (Professeur Shadoko) S'il n'y a pas de solution, c'est qu'il n'y a pas de problème! (Un shadok anonyme) Pourquoi faire simple quand on peut faire compliqué !? (Un autre shadok anonyme)
Samoht	# Posté le 15/02/2008 à 19:36:01
Détermination=>Réussite Groupe : Membres	C'a à l'air de marcher, mais j'ai du mal à différentier les navigateurs en javascript ... Faut-il utiliser les conditions : Code : JavaScript - Afficher / masquer les numéros de ligne if(document.all) else if(document.getElementById) Un programmateur du dimanche fais un site internet, ça donne ça !
Samoht	# Posté le 16/02/2008 à 19:37:05
Détermination=>Réussite Groupe : Membres	up ! Un programmateur du dimanche fais un site internet, ça donne ça !
BkM	# Posté le 16/02/2008 à 19:54:59
Perds pas ton sneps comme ca ! Groupe : Membres	Tu peux utiliser l'objet navigator : qu'est-ce ? Tu peux faire : Code : JavaScript - Afficher / masquer les numéros de ligne if(document.all) // Cas de IE ... else // Cas des autres navigateurs ... Note : ces vérifications se font vieillotes (existent depuis la version 5 d'IE) LIKE THE WEB : cours de JAVASCRIPT, DOM, XML, et AJAX !
Samoht	# Posté le 16/02/2008 à 21:13:29
Détermination=>Réussite Groupe : Membres	Merci ! Grace à vous j'ai réussi à faire ce que je voulais : Code : JavaScript - Afficher / masquer les numéros de ligne if(navigator.appName=='Netscape') var navigateur='firefox'; else if(navigator.appName=='Microsoft Internet Explorer') var navigateur='IE'; else var navigateur='autre'; function afficherPopup(i) { i+=0.1; document.getElementById('popupjs').style.display='block'; if(navigateur=='firefox') document.getElementById('popupjs').style.MozOpacity=i; else if(navigateur=='IE') document.getElementById('popupjs').style.filter='alpha(opacity='+i100+')'; else document.getElementById('popupjs').style.opacity=i; if(i<1) setTimeout("afficherPopup("+i+")",40); } function masquerPopup(i) { i-=0.1; if(navigateur=='firefox') document.getElementById('popupjs').style.MozOpacity=i; else if(navigateur=='IE') document.getElementById('popupjs').style.filter='alpha(opacity='+i100+')'; else document.getElementById('popupjs').style.opacity=i; if(i>0) setTimeout("masquerPopup("+i+")",40); else document.getElementById('popupjs').style.display='none'; } Code : HTML - Afficher / masquer les numéros de ligne <body style="background-color:white;padding:0px;margin:0px;"> <div style="display:none;position:fixed;background-color:black;top:0px;left:0px;width:100%;height:100%;" id="popupjs"> <input type="button" style="border:1px solid white;background-color:black;color:white;margin-left:100px;margin-top:100px;width:100px;height:50px;" value="Masquer" onclick="javascript:masquerPopup(1);"/> </div> <input type="button" style="border:1px solid black;background-color:white;color:black;margin-left:100px;margin-top:100px;width:100px;height:50px;" value="Afficher" onclick="javascript:afficherPopup(0);"/> </body> Un programmateur du dimanche fais un site internet, ça donne ça !
cbasile06	# Posté le 17/02/2008 à 08:57:07
Je pompe, donc je suis Groupe : Membres	Et Code : JavaScript - Afficher / masquer les numéros de ligne if(navigator.userAgent.indexOf('KHTML') != -1) document.getElementById('popupjs').style.KhtmlOpacity=i; alors? Avec ton code, tu oublies les navigateurs KHTML (Konqueror). Plus ça rate, plus il y a de chances que ça marche (Professeur Shadoko) S'il n'y a pas de solution, c'est qu'il n'y a pas de problème! (Un shadok anonyme) Pourquoi faire simple quand on peut faire compliqué !? (Un autre shadok anonyme)
Attonde	# Posté le 17/02/2008 à 09:46:30
T'en fais pas, elle est moche. Groupe : Membres	Code : CSS - Afficher / masquer les numéros de ligne -moz-opacity:0.2; opacity: 0.2; Bah ces deux codes reviennent strictement au même, pour alléger je propose juste le "opacity: 0.2;" que geko gère parfaitement . Bye, S@suke YourBloug [\|\|\|\|\|50%\|\|\|\|\|] Help me ! Développeur/Rédacteur Shine-shiina. Le développement du Mali ? Cf ma biographie . Beau goss cherche belle geekette, MP le ! Envie de dev aWLM... lol
cbasile06	# Posté le 17/02/2008 à 10:53:56
Je pompe, donc je suis Groupe : Membres	Pas toujours vrai, les anciennes version de Firefox/Mozilla ne supportent pas opacity. Plus ça rate, plus il y a de chances que ça marche (Professeur Shadoko) S'il n'y a pas de solution, c'est qu'il n'y a pas de problème! (Un shadok anonyme) Pourquoi faire simple quand on peut faire compliqué !? (Un autre shadok anonyme)
Samoht	# Posté le 17/02/2008 à 11:20:31
Détermination=>Réussite Groupe : Membres	Ok, merci de m'avoir rectifié ! Un programmateur du dimanche fais un site internet, ça donne ça !
Attonde	# Posté le 17/02/2008 à 12:29:57
T'en fais pas, elle est moche. Groupe : Membres	Citation : cbasile06 Pas toujours vrai, les anciennes version de Firefox/Mozilla ne supportent pas opacity. Bah j'ai jamais vu une version de firefox pas à jour... Même sur windows98... Alors bon... et puis quand on dit pas à jour... Firefox 2.0 gère opacity... Après on tombe sur la v1 mais je doute que des gens tournent encore avec cette version . YourBloug [\|\|\|\|\|50%\|\|\|\|\|] Help me ! Développeur/Rédacteur Shine-shiina. Le développement du Mali ? Cf ma biographie . Beau goss cherche belle geekette, MP le ! Envie de dev aWLM... lol
cbasile06	# Posté le 04/03/2008 à 18:35:01
Je pompe, donc je suis Groupe : Membres	Il y a encore des gens qui utilisent firefox 1.5, et il me semble que celui-ci ne supporte pas opacity... Après, c'est peut-être moi qui suis pas à jour Édité le 04/03/2008 à 18:35:53 par cbasile06 Plus ça rate, plus il y a de chances que ça marche (Professeur Shadoko) S'il n'y a pas de solution, c'est qu'il n'y a pas de problème! (Un shadok anonyme) Pourquoi faire simple quand on peut faire compliqué !? (Un autre shadok anonyme)
Attonde	# Posté le 05/03/2008 à 16:15:59
T'en fais pas, elle est moche. Groupe : Membres	Tu dois avoir raison... Mais ça n'empêche que firefox 1.5.. c'est vachement vieux déjà (et moi à l'époque où j'avais win98 je tournais avec firefox 2. . .) YourBloug [\|\|\|\|\|50%\|\|\|\|\|] Help me ! Développeur/Rédacteur Shine-shiina. Le développement du Mali ? Cf ma biographie . Beau goss cherche belle geekette, MP le ! Envie de dev aWLM... lol

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages