Aller au menu - Aller au contenu

Popup javascript avec apparition du fond en fondu

comment faire ?

Pour accéder à cette section
Connectez-vous !
connexion_rpx

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

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Samoht # Posté le 13/02/2008 à 06:59:47
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
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 :lol: !
Image utilisateur
 
Hors ligne aenario # Posté le 13/02/2008 à 09:25:48
Avatar
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 ! o_O Et oui, j'aime pas les cons :colere2:
 
Hors ligne Samoht # Posté le 13/02/2008 à 17:52:06
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
Cool !!
Mais c'est pas incompatible avec les autres navigateurs que Firefox (le moz-opacity) ? :euh:
Un programmateur du dimanche fais un site internet, ça donne ça :lol: !
Image utilisateur
 
Hors ligne aenario # Posté le 14/02/2008 à 18:43:17
Avatar
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 ! o_O Et oui, j'aime pas les cons :colere2:
 
Hors ligne Samoht # Posté le 14/02/2008 à 19:00:12
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
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 :lol: !
Image utilisateur
 
Hors ligne cbasile06 # Posté le 14/02/2008 à 21:00:45
Je pompe, donc je suis
-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)
Image utilisateur
 
Hors ligne Samoht # Posté le 15/02/2008 à 18:51:49
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
J'ai fais le code suivant :

Code : JavaScript - Afficher / masquer les numéros de ligne
  1. function mfkt(cible, i)
  2. {
  3.         i++;
  4.        
  5.         document.getElementById(cible).style.-moz-opacity=i;
  6.         document.getElementById(cible).style.-khtml-opacity=i;
  7.         document.getElementById(cible).style.opacity=i;
  8.         document.getElementById(cible).style.filter='alpha(opacity='+i*100+')';
  9.        
  10.         setTimeout("mfkt("+cible+", "+i+")",1000);
  11. }

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 :lol: !
Image utilisateur
 
Hors ligne cbasile06 # Posté le 15/02/2008 à 19:01:26
Je pompe, donc je suis
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)
Image utilisateur
 
Hors ligne Samoht # Posté le 15/02/2008 à 19:36:01
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
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
  1. if(document.all)
  2. else if(document.getElementById)
Un programmateur du dimanche fais un site internet, ça donne ça :lol: !
Image utilisateur
 
Hors ligne Samoht # Posté le 16/02/2008 à 19:37:05
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
up !
Un programmateur du dimanche fais un site internet, ça donne ça :lol: !
Image utilisateur
 
Hors ligne BkM # Posté le 16/02/2008 à 19:54:59
Avatar

études : UTC
Tu peux utiliser l'objet navigator : qu'est-ce ?

Tu peux faire :
Code : JavaScript - Afficher / masquer les numéros de ligne
  1. if(document.all) // Cas de IE
  2. ...
  3. else // Cas des autres navigateurs
  4. ...

Note : ces vérifications se font vieillotes (existent depuis la version 5 d'IE)
Anis Safine - Webdeveloppeur et être humain
Liketheweb.fr - Cours sur le Javascript
 
Hors ligne Samoht # Posté le 16/02/2008 à 21:13:29
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
Merci ! Grace à vous j'ai réussi à faire ce que je voulais :

Code : JavaScript - Afficher / masquer les numéros de ligne
  1. if(navigator.appName=='Netscape') var navigateur='firefox';
  2. else if(navigator.appName=='Microsoft Internet Explorer') var navigateur='IE';
  3. else var navigateur='autre';
  4.  
  5. function afficherPopup(i)
  6. {
  7.         i+=0.1;
  8.        
  9.         document.getElementById('popupjs').style.display='block';
  10.     if(navigateur=='firefox') document.getElementById('popupjs').style.MozOpacity=i;
  11.     else if(navigateur=='IE') document.getElementById('popupjs').style.filter='alpha(opacity='+i*100+')';
  12.         else document.getElementById('popupjs').style.opacity=i;
  13.        
  14.         if(i<1) setTimeout("afficherPopup("+i+")",40);
  15. }
  16. function masquerPopup(i)
  17. {
  18.         i-=0.1;
  19.        
  20.     if(navigateur=='firefox') document.getElementById('popupjs').style.MozOpacity=i;
  21.     else if(navigateur=='IE') document.getElementById('popupjs').style.filter='alpha(opacity='+i*100+')';
  22.         else document.getElementById('popupjs').style.opacity=i;
  23.        
  24.         if(i>0) setTimeout("masquerPopup("+i+")",40);
  25.         else document.getElementById('popupjs').style.display='none';
  26. }



Code : HTML - Afficher / masquer les numéros de ligne
  1. <body style="background-color:white;padding:0px;margin:0px;">
  2. <div style="display:none;position:fixed;background-color:black;top:0px;left:0px;width:100%;height:100%;" id="popupjs">
  3. <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);"/>
  4. </div>
  5. <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);"/>
  6. </body>
Un programmateur du dimanche fais un site internet, ça donne ça :lol: !
Image utilisateur
 
Hors ligne cbasile06 # Posté le 17/02/2008 à 08:57:07
Je pompe, donc je suis
Et
Code : JavaScript - Afficher / masquer les numéros de ligne
  1. if(navigator.userAgent.indexOf('KHTML') != -1)
  2. 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)
Image utilisateur
 
Hors ligne Attonde # Posté le 17/02/2008 à 09:46:30
T'en fais pas, elle est moche.
Avatar
Code : CSS - Afficher / masquer les numéros de ligne
  1. -moz-opacity:0.2;
  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
Hors ligne cbasile06 # Posté le 17/02/2008 à 10:53:56
Je pompe, donc je suis
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)
Image utilisateur
 
Hors ligne Samoht # Posté le 17/02/2008 à 11:20:31
Détermination=>Réussite
Avatar

Ville : Marguerittes
Pays : France métropolitaine
Ok, merci de m'avoir rectifié ;) !
Un programmateur du dimanche fais un site internet, ça donne ça :lol: !
Image utilisateur
 
Hors ligne Attonde # Posté le 17/02/2008 à 12:29:57
T'en fais pas, elle est moche.
Avatar
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 o_O .
Hors ligne cbasile06 # Posté le 04/03/2008 à 18:35:01
Je pompe, donc je suis
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 :p
É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)
Image utilisateur
 
Hors ligne Attonde # Posté le 05/03/2008 à 16:15:59
T'en fais pas, elle est moche.
Avatar
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. . .)

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

Pour accéder à cette section
Connectez-vous !
connexion_rpx