18073 sujets

Questions générales et questions de débutants

Les popup ne s'affichent pas [résolu]

J'essaie d'utiliser le tuto sur les popup sans nouvelles fenetres:

mon probleme c'est que lorsque je clique sur le lien "lien ouvre popup" le texte contenu dans la popup s'affiche en dessous du reste de ma page sans qu'il y'ait de création de la popup.

je ne vois pas ce qui ne va pas dans la mesure où j'ai fait des copier-collers du code.

j'ai bien crée mes deux fichiers css pour le style et txt pour le script... et j'ai modifié les chemins d'accès dans la partie xhtml...
Modifié par moulagaufr (01 May 2006 - 15:40)
Bonjour Moulagaufr,

Est-ce que tu peux ajouter un lien vers le tutoriel et un lien vers ta page et ton css dans ton message, ce sera plus simple pour t'aider. Smiley cligne

Aymeric
Voici le lien vers le tuto:

http://css.alsacreations.com/Tutoriels-JavaScript/Faire-apparaitre-des-popups-sans-nouvelle-fenetre.

Le test que j'en ai fait n'est pas en ligne mais sur mon pc, mais je me suis borné à faire des copies de ce qu'il y a sur le tuto, en changeant les chemins d'accés. Le css doit marcher puisque les couleurs correspondent avec l'exemple, et le javascript aussi car en cliquant sur le lien je déclenche l'affichage du contenu de la popup. le seul soucis donx, c'est que ce contenu ne s'affiche pas dans un popup mais a la suite de ma page.
Dans ton css, y'a bien ces lignes? : 

#popup {
display: none;
position: absolute;
bottom: 5em;
right: 10em;
width: 20em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
cursor: pointer;
font-size: 80%;
}


La div de ta pop-up à bien comme id popup?

<div id="popup">


Sans ton code je ne peux faire que des suppositions, au pire poste ton code et ton css dans ton message en utilisant les balises code.
Voici la feuille de style...

body {
background: #cccc99;
font: 1em verdana, arial, sans-serif;
}
#pop {
display: none;
position: absolute;
bottom: 5em;
right: 10em; 
width: 20em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
cursor: pointer;
font-size: 80%;
}
#pop p {
margin: 0 0.3em;
}
#pop h1 {
font-size: 110%;
margin: 0 0 0.5em 0;
border-bottom: 1px solid black;
background: white url(top.gif) left top repeat-x;
color: black;
text-align: center;
}
.fermer {
margin: 0.5em 0 0 0;
border-top: 1px solid black;
background: white url(bottom.gif) left top repeat-x;
color: black;
text-align: center;
}
Ah oui!

effectivement si je renome dans ma Css "pop" par "pop1" la pop 1 s'affiche...

Mais si j'ai 2 pop a afficher il faut que j'ai dans mon fichier css 2 fois le meme code l'un appelé pop1 et l'autre pop2? Meme si je veux le meme style pour toutes les popup?
Non, pas la peine tu fais ta css comme ça :

#pop1, #pop2 {
display: none;
position: absolute;
bottom: 5em;
right: 10em; 
width: 20em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
cursor: pointer;
font-size: 80%;
}
etc...etc...


Mais si je peux me permettre un petit conseil, lis bien toute la faq et les tutos pour avoir un peu de bases CSS autrement tu vas faire du copier/coller sans rien comprendre et ce n'est pas très intéressant ... Smiley cligne
Bon courage !
Désolée, envoi trop tôt, par erreur et pas de possibilité de modifier le message précédent donc, suite et fin :
Mais le plus simple si toutes tes popup ont le même style c'est de leurs attribuer une class et non pas une id 

.popup { 
tes attibuts de style ....
}

et dans le xhtml :

<div class="popup" />
pour toutes les popup ...

Voilà ... re- bon courage ! Smiley smile
Merci,

les deux versions fonctionnent, je vais quand meme garder la dernière.

Dernière petite question... la pop s'affiche en bas de ma page, comment faire pour qu'elle s'affiche à l'endroit où l'on clique?


Ps: effectivement je pourrais apprendre à programmer, mais vu ce que j'ai besoin de faire ca n'aurait pas beaucoup d'interet: mon site est presque fini et j'airais bien le temps par la suite d'apprendre tout ca pour ajouter quelques petites améliorations....
Bon, après tu cherches un peu d'accord Smiley cligne
ce qui positionne ta popup c'est :

position: absolute;
bottom: 5em;
right: 10em; 
width: 20em;

alors tu peux essayer de modifier les valeurs en "em" et de voir ce que cela donne ...
Attention si tu ne veux pas te mélanger les pinceaux, essaye une modif à la fois ... Smiley smile
ce n'est pas une question de lourdeur, mais de ne pas gâcher son temps à faire des choses que l'on ne comprends pas ...!
Si c'est bon pour toi, penses à éditer ton 1er message et à noter [résolu] à côté du sujet Smiley ravi
Sujet clos
Aller à