Ouverture d'un pop-up personnalisable en cliquant sur une image [Résolu]
darksam0000128
Messages postés mardi 24 juin 2008Date d'inscription
5 juillet 2016
Dernière intervention
-
18 nov. 2014 à 11:28 - Dernière réponse : @karamel1655
Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut
19 avril 2018
Dernière intervention
- 22 nov. 2014 à 20:35
Voilà, j'essaye désespérément de créé un pop-up personnalisable en JavaScript/CSS. Je vous explique mon procéder !
Voici le menu que j'ai créé en HTML/CSS :
Ce menu sera composé des photos des membres d'une guilde.
Moi, j'aimerais voir afficher un pop-up lorsqu'on clique sur une de ces photos en utilisant JavaScript et CSS pour le personnaliser, et cela pour chaque photo. Et c'est là que je suis coincé, d'autant plus que je ne suis pas fortiche en JS !
En résumé, je clique sur la photo "membre1" et un pop-up s'ouvre avec ses coordonnées etc... (sans quitter au préalable ma page "membres.html"). Egalement la possibilité de fermer le pop-up à l'aide d'un bouton intégré au pop-up.
Vous avez toujours pas saisis, pas besoin que les membres se connectent sur le site pour cela. L'affichage des membres sur le site permet juste de voir de quoi est composée la guilde. Un affichage simple avec les photos des membres a titre indicatif. Moi ce que je voulais c'est juste :
Je clique sur la photo d'un membre et voir apparaître un pop up avec un petit texte stipulant : ce membre s'appelle membre X, il est le fondateur etc. Rien de plus.
Le code ici fonctionne bien mais le texte marqué dans le JS s'affiche le meme sur tous les pop-up.
Regardez plutôt :
Je me trouve sur la page "membre.html". Là ou sont affichés les photos des membres d'une guilde.
Je clique sur la photo du "membre 1". Et apparaît un pop-up reprenant un texte récapitulatif (max 2 voir 3 lignes) de son parcourt dans la guilde.
En résumé, quand je clique sur membre 1 ou 2 ou 3 ou 4, le texte marqué dans le pop-up est identique ... Je peux pas vous l'expliquez autrement ! Je sais que c'est possible mais je ne peux pas le faire tout seul.
Pour ce qui est de la BDD, elle est terminée. Tout ce qui touche à la connexion d'une session sur le site a été cloturer hier dans l'après midi.
jordane4520606
Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut
24 avril 2018
Dernière intervention -22 nov. 2014 à 14:31
Vous avez toujours pas saisis, pas besoin que les membres se connectent sur le site pour cela.
Mais je n'ai jamais parlé du fait que les membres se connectent...
Je t'ai juste dit : Si tu as une Base de données.... comment compte tu la faire interagir avec ton site... vu que tu ne fais aucun lien entre elle et tes pages web.... que pour le faire il te faut utiliser autre chose que simplement du HTML ....
En gros.. ce que tu es en train de faire .. c'est d'écrire en DUR dans ton code les informations relatives à tes membres.... donc... aucun lien avec la BDD .. et donc.. à chaque fois que tu auras un nouveau membre (ou qu'un membre partira).. tu devras éditer le code source de tes pages pour y modifier les informations que tu souhaites y afficher....
Je pense que tu n'as pas compris comment fonctionne un site web "dynamique" .
Et je vais quand même te résoudre ton souci....
lorsque tu utilises klog.logdial(0) ....
Il faut mettre dans les parenthèses le numéro de la personne correspondant au tableau....
Pourrais-tu adapter le code en reprenant celui de mon dernier commentaire du bas pour exemple stp car ici je suis sur mon iPhone au boulot.
Je viens de comprendre pour la bdd. La pièce est tombée. Oui en effet pas de liaisons avec ma page html. En tout cas sur la page membres.html c'est normale du moins. C est encore une page test qui n a pas encore été intégrer au site. Les autres pages sont bien liées. Enfin presque toute car certaines n en ont pas besoin. Beaucoup de contenu statique sans php.
En créant ce tableau de membres nous voulions alléger le code en utilisant du JS. Finalement je constate que je resterais une loque en JS LOL.
recopie et teste le code complet que j'avais mis plus haut j'ai fait des modif qui son l'ajout d'un array comprenant un descriptif different pour chaque menbre et j'ai modifier le html au niveau du onclick en ajoutant un parametre qui est une valeur numerique corespondant au texte a afficher.
rien ne sert de courir il faut partir a point.
cours Forest cours !
Ça fonctionne parfaitement ! Un grand merci à toi !
Pour info : la BDD permettra uniquement aux membres d'avoir accès à un autre contenu. Dans aucun cas, les membres pourront modifier quoi que se soit sur la page "membres.html". J'aurais du le spécifier plus haut ^^
Maintenant comment dois-je faire si je veux rajouter des membres supplémentaire ?
Car l'image 9 et 10, c'est le texte 1 qui apparaît. Par contre les 8 premières images, c'est bien tous les textes différents que tu m'as mis !
jordane4520606
Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut
24 avril 2018
Dernière intervention -18 nov. 2014 à 11:58
0
Utile
Bonjour,
As tu regardé du côté de Jquery ?
Des exemples de fenêtres modal existent en pagaille....
Le tout..; couplé avec de l'AJAX pour récupérer les informations que tu souhaites afficher.
kuetedonald : je ne vois pas comment je pourrais intégrer ton code source dans mes images "membres" que j'ai montré ci-dessus. Cela me semble énorme, surtout si je dois adapter ces lignes pour chaque lien "img" ! Au pire des cas, pourrais-tu essayer d'intégrer ton idée par rapport à mon code source stp ?
Peti rappel : un pop up différent doit etre ouvert sur ma page pour chaque image des membres (voir photo au dessus).
Soit, je vais tester tout cela dés que j'ai le temps et je vous tiens au courant.
jordane4520606
Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut
24 avril 2018
Dernière intervention -19 nov. 2014 à 00:01
Dis toi que quelle que soit la méthode que tu choisiras. ..tu n'auras qu'un seul popup...mais que tu rempliras en fonction de tes besoins (d'où l'Ajax..)
Ca fonctionne vraiment bien. j'ai un beau pop up sur fond blanc cadré de noir qui s'affiche au centre de mon écran et cela pour chacun des membres mais ou dois-je taper le texte de présentation du pop up ?
@karamel1655
Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut
19 avril 2018
Dernière intervention -21 nov. 2014 à 20:37
c'est dans la fonction boit que la fenetre est cree apres sa tu a deux solution soit tu cree le html texte compris en passant par les methodes du dom soit tu insere du html avec innerHTML
exemple avec innerHtml
boite:function(){
var el=document.createElement('div');
el.id='cadre';
var el2=document.createElement('div');
el2.className='im3';
el2.onclick=klog.quit
var txt=document.createTextNode('X')
el2.appendChild(txt)
// ici commence l'exemple
var le_html='<br><br><span style="color:black">text_a_inserer</span><br><span style="color:black">text_a_inserer2</span>'
el.innerHTML+=le_html
/////////////////////
el.insertBefore(el2, el.firstChild)
document.body.appendChild(el)
this.centrer(el)
typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);
},
exemple avec le dom
boite:function(){
var el=document.createElement('div');
el.id='cadre';
var el2=document.createElement('div');
el2.className='im3';
el2.onclick=klog.quit
var txt=document.createTextNode('X')
el2.appendChild(txt )
el.appendChild(el2)
// ici commence l'exemple
var span_a_cree=document.createElement('span');
span_a_cree.style.color='black';
var text_a_inserer=document.createTextNode('voici du texte a inserer')
span_a_cree.appendChild(text_a_inserer)
el.appendChild(span_a_cree)
var saut=document.createElement('br');
el.appendChild(saut)
var span_a_cree2=document.createElement('span');
span_a_cree2.style.color='black';
var text_a_inserer2=document.createTextNode('voici encore du texte a inserer')
span_a_cree2.appendChild(text_a_inserer2)
el.appendChild(span_a_cree2)
el.appendChild(span_a_cree2)
//////////////////////////////////////////
document.body.appendChild(el)
this.centrer(el)
typeof window.addEventListener == 'undefined' ? window.attachEvent("onresize",klog.centrer) : window.addEventListener('resize',klog.centrer,false);
},
le plus simple quand on a pas l'habitude est d'utiliser innerHtml
ensuite pour ce qui est des donné pour chaques utilisateurs elles son ou dans une base de donné ? un fichier php ? un fichier js ?
darksam0000128
Messages postés mardi 24 juin 2008Date d'inscription
5 juillet 2016
Dernière intervention
>
@karamel1655
Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut
19 avril 2018
Dernière intervention -21 nov. 2014 à 21:47
Non en faite, quand ma liste des membres est affichées, je souhaiterais que les gens visionnent un résumé du membre (petit texte de 2/3 lignes dans chaque pop up).
En clair, quand je clique sur l'image correspondant au membre 1, un pop-up apparaît avec un texte basique récitant le parcours du membre 1. Rien de complexe.
Peu être par la suite, ajouté une image de 32x32 pour lui attribuer un grade.
Ma base de donnée est déjà faite ;) Je te l'ai dis ... il y a vraiment que le JavaScript ou je galère encore quelque peu.
Ton aide m'est vraiment précieuse. Merci
EDIT : j'ai essayé les 2 façons mais ça affiche en doublon le même texte dans tous les popup de chaque image.
@karamel1655
Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut
19 avril 2018
Dernière intervention -21 nov. 2014 à 23:48
mais la base de donnée est bien stoké sur un serveur car comme jordane45 te l'a expliquer il faut recupere les donné en utilisant ajax ensuite c'est une question de remplissage des donné dans la fenetre en fonction du format des donné recu (json ou xml) il faudra ajouter quelles ligne de code mais si on ne connais pas le format de reception des donné on ne peut pas créer la fonction qui modifiera la fenetre,
on ne vas pas cree une fenetre pour chaques profiles mais on a une unique fenetre dans laquel on modifie les donné en fonction du profile c'est plus simple de faire comme ca que de creer x fenetre pour x profile
jordane4520606
Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut
24 avril 2018
Dernière intervention -21 nov. 2014 à 23:56
Surtout que pour l'instant tu ne nous as parlé que d'HTML et de CSS ... hors maintenant que tu nous parles d'une base de données... je me demande bien ce que tu comptes utiliser pour alimenter ta page .....et de surcroit (comme le fait remarquer Kazma) tes popups....
Donc..; si comme je le pense tu as tes "membres" dans ta BDD (et toutes les infos les concernant) tu devrais avoir dans ton code un langage permettant de gérer une connexion (et une utilisation) à une BDD.. (du PHP .. de l'ASP ...)...hors, dans le code que tu nous as montré au début.. tu as écris en "dur" les différentes DIV de tes membres.....
J'ai l'impression que tu n'as pas encore pensé à la liaison avec ta BDD ... et si c'est le cas... tu devrais commencer par ça !
Je me trompe ???
Ca a marcher au debut et maintenant ca marche plus :((((( les textes sont tous pareils dans chaque pop up ... j'ai juste changer la photo et changer les nom des membres .... je comprend plus rien.
tb_texte:["Texte du membre 1","Texte du membre 2","Texte du membre 3","Texte du membre 4","Texte du membre 5","Texte du membre 6","Texte du membre 7","Texte du membre 8","Texte du membre 9","Texte du membre 10"],
var el=document.getElementById('cadre'); el.style.top=(document.documentElement.clientHeight-el.offsetHeight)/2+"px"; el.style.left=((document.documentElement.clientWidth-el.offsetWidth)/2)+'px'; }
}
Au debut ca m'affichait bien les texte différentes dans chaque pop up mais maintenant plus :(. Ou es l'erreur ?
Hors... tu n'as pas repris le code donné précédement dans lequel le paramètre passé à la fonction logdial était incrémenté pour correspondre à l'indice du talbeau Javascript contenant le détail des membres ..
Il ne suffit pas de prendre des bouts de code et de les assembler.... il faut les comprendre...
et de ce que j'en vois.. tu en es loin....
Me dire que vu que ta page n'est pas encore intégrée dans ton site... tu la code en dur... argghhh......
Je ne vois pas le rapport.... Surtout si tu comptes la lier à ta BDD plus tard ... autant la coder en PHP directement non ???
Cela n'empeche pas d'y mettre du javascript (bien au contraire)...
Mais répeter à la main.. la création des DIV ( de tes membres) alors qu'une boucle PHP ferait tout aussi bien ( mieux) l'affait ... me laisse perplexe.
init:function(){
var all=document.getElementById('aside').getElementsByTagName('div')
for (var i=0; i<all.length; i++)
all[i].setAttribute('onclick','klog.logdial('+i+')')
},
puis tout a la fin du script apres la derniere acolade rajoute cette ligne
Cependant je n'arrive pas a centrer le pop up au centre de l'écran par défaut. Est-ce possible de le faire ?