Un genre de popUp.

Eléphant du PHP | 54 Messages

05 oct. 2008, 04:41

Bonjour,

J'aimerais réaliser un genre de "PopUp", mais pas sous une autre page. :roll:
C'est un peu complexe à expliquer en mots donc voici un exemple,

Rendez-vous au:
http://www.tomsguide.com/fr/

Ensuite dans le coin supérieur droit, cliquer sur "Se connecter"
Vous verrez normalement un genre de "popup" s'ouvrir (si je peux appeler sa comme sa).

Je me demande si c'est possible de créer ce genre de "popUp" en JavaScript. Ou bien c'est du Java, ou encore du Flash?
Mon niveau dans ces 3 languages est quasiment nulle.
Si quelqu'un à la réponse à ma question ou si il existe de la documentation pour faire se genre d'effet. Je lui serais ÉNORMÉMENT reconnaissant! :wink:

Merci beaucoup!
Maxime :wink:
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

ViPHP
AB
ViPHP | 5818 Messages

05 oct. 2008, 04:59

Javascript peut faire ce genre de chose. Pas besoin d'un autre langage.

J'ai pas de tuto sous la main ni le temps de t'en dire plus mais cherche dans cette direction, la base n'est pas très compliquée.

D'ailleurs l'exemple que tu donne est bien fait puisque si javascript est désactivé dans le navigateur un autre affichage est proposé pour la connexion (du bon boulot) :wink:

Eléphant du PHP | 54 Messages

05 oct. 2008, 06:00

D'accord merci,

Si quelqu'un à de la documentation qui explique comment faire se genre d'effet ou bien la base de ce genre d'effet, je suis très intéraissé!

Au moi je sais dans qu'elle direction chercher!

Merci encore!
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

ViPHP
ViPHP | 3607 Messages

05 oct. 2008, 09:25

en gros (hormis l'effet de fondus), c'est assez simple...
Il suffit, en html et css de construire ta boîte au dessus de tout le reste centré et tt et tt, et après, tu joues sur les propriétés display ou visibility...
Mais si tu veux que ce soit "tout joli" comme ton exemple, il y a des librairies qui propose ça...
En l'occurence, sur ton exemple, il utilisent http://script.aculo.us/ plus des ajouts à eux...

Eléphant du PHP | 54 Messages

05 oct. 2008, 17:39

Oki, merci.

Je vais tenter de le faire moi même et si j'y arrive pas je me tournerai vers les script tout fait!
Petite question sauf,
Comment changer un paramêtre de CSS (comme Display ou Visibility) via JavaScript? :?

Merci encore!
Maxime
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

05 oct. 2008, 18:02

Tu peux accéder simplement aux propriétés de tes éléments en javascript en suivant l'arborescence du dom :
document.getElementById('id_de_ton_element').style.display = 'block'; // ou 'none' pour le masquer
document.getElementById('id_de_ton_element').style.visibility = 'visible'; // ou 'hidden' pour le masquer
"document" correspond à la page, le "getElementById" te reoutrne l'objet dont l'id est spécifié, "style" l'attribut éponyme, quant à "display" ou "visibility" elles te donnent accès à ces propriétés. Il ne te reste plus qu'à leur passer de nouvelles valeurs pour les modifier :)

tu peux également utiliser un
document.getElementById('id_de_ton_element').className = 'nom_classe_css';
pour changer la classe css de l'élément :)
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Eléphant du PHP | 54 Messages

05 oct. 2008, 18:16

Je ne suis pas trop certain de comprendre,

"document" est le nom CSS ? exemple: style.css?
Et puis comment trouver le id de l'élément?

Peut-être que je ne suis pas assez instruit sur le Javascript.

Encore merci de vos réponses rapides!
Maxime
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

ViPHP
AB
ViPHP | 5818 Messages

05 oct. 2008, 20:13

"document" correspond à la page dans laquelle le script est écrit. Et quand on fait document.getElementById('toto') on désigne l'élément dont l'ID est "toto" dans la page en cours.

Donc si dans mon code html j'ai un id que j'appelle toto je vais désigner cet élément là.

Une fois l'élément désigné on peut éventuellement lui appliquer des styles en utilisant la même syntaxe que pour les css - excepté pour les mots composés pour lesquels on enlève le tiret et on ajoute une majuscule au second nom ex : font-weight devient fontWeight -

Par exemple tu peux tester ce code :

Code : Tout sélectionner

<body> <div id="toto" style="position:absolute;left:20%;height:200px;width:200px;display:none;color:#FFFFFF;background:green;border:2px solid black"> Test d'affichage.<br /> Dans cette div tu peux très bien mettre un formulaire <br /> <input style="position:absolute;right:0px;bottom:0px" type = "button" value = "cacher" onclick = "document.getElementById('toto').style.display = 'none';"/> </div> <input type = "button" value = "afficher" onclick = "document.getElementById('toto').style.display = 'block';"/> </body>

Eléphant du PHP | 54 Messages

05 oct. 2008, 21:41

Je comprend maintenant!
Super exemple.
Encore merci de ton aide!
Sa fonctionne nikel!

Mille merci!!!
Maxime
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.