Webmaster Hub: Popup jquery - Webmaster Hub

Aller au contenu

Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Popup jquery

#1 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 12 janvier 2012 - 11:59

Bonjour à toutes et à tous,


Je galère depuis 2 jours !

Un lien ouvre une popup jquery avec le contenu de la balise <div id> se trouvant sur la page.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITRE</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>


<style type="text/css">
.pop
{display: none; /*--masquage par défaut--*/
border: 15px solid red;}
</style> 


<script type="text/javascript">
$(document).ready(function() {

$('a.popup[href^=#]').click(function() 
{var popID = $(this).attr('rel'); 

$('#' + popID).fadeIn() 
.css({'width': Number(400)})});});
</script> 
    
    
</head>
<body> 

<a href="#" rel="18652" class="popup">lien</a>
  
<div id="18652" class="pop">
<p>popup</p>
</div>

</body>
</html>





Ce code css/javascript/html fonctionne.


Ce que je souhaiterais : que la pop up qui s'ouvre contienne l'url d'une seconde page (et que cette url contienne l'id pour pouvoir la récupérer sur cette seconde page qui contiendra le contenu <div id> ).

Donc au clic sur le lien :

1/ récupérer le contenu de "rel" du lien par javascript,
2/ ouvrir popup jquery en affichant la page http://www.monsite.com/?id=18652 (ou ouvrir l'url en popup jquery)

Je commence un peu à me débrouiller en php mais à mon niveau de javascript, je rame sec. Peut-être faut-il utiliser de l'ajax ? Je n'en sais trop rien...

Si quelqu'un ou quelqu'une pouvait me donner un coup de main...

Sandy
0

#2 L'utilisateur est en ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 12 janvier 2012 - 13:02

Salut,

Pour commencer : un id ne doit jamais commencer par un chiffre. Donc plutôt que id="18652", tu devrais mettre id="truc_18652". (et dans le javascript remplacer $('#' + popID) par $('#truc_' + popID) )

Ensuite, pour afficher une page dans une autre, il faut utiliser une iframe (éventuellement un object).
Tu peux donc remplacer
<div id="18652" class="pop">
<p>popup</p>
</div>

par
<iframe id="truc_18652" class="pop"></iframe>

Et dans le javascript, après avoir récupéré popID, tu modifies la source de l'iframe :
$('#truc_' + popID).attr('src', 'http://monsite.com/?'+popID);


Edit : et dans la foulée, si tu optes pour cette solution, pense aussi à choisir un DOCTYPE frameset ;)
0

#3 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 12 janvier 2012 - 15:33

Salut et merci beaucoup Ernestine pour ta réactivité et ta réponse !

J'ai fait ce que tu m'as dit :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TITRE</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>



<style type="text/css">
.pop
{display: none; /*--masquage par défaut--*/
border: 15px solid red;}
</style> 


<script type="text/javascript">
$(document).ready(function() {

$('a.popup[href^=#]').click(function() 
{var popID = $(this).attr('rel'); 
//alert (popID);
$('#truc_' + popID).attr('src', 'http://monsite.com/?id='+popID);
$('#' + popID).fadeIn() 
.css({'width': Number(400)})});});
</script> 
    
    
</head>
<body> 

<a href="#" rel="truc_18652" class="popup" >lien</a>
  
<iframe id="truc_18652" class="pop"></iframe>

</body>
</html>





Et j'ai 2 soucis :

1/ la récupération du popID se fait bien mais ne s'insère pas à la place de popID dans la ligne : .attr('src', 'http://monsite.com/?id='+popID
2/ j'aurais souhaité n'avoir dans la page xhtml que le lien (et donc que la ligne <iframe n'apparaisse pas)

tu crois que c'est possible ?

En fait j'aurais souhaité que ce résultat n'apparaisse que dans la deuxième page appelée (et si possible en utilisant autre chose qu'iframe).

J'exagère peut-être ?
0

#4 L'utilisateur est en ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 12 janvier 2012 - 15:54

Ah, tu veux juste afficher le lien dans la pop-in, et que ce lien mène vers l'url ?

Dans ce cas effectivement, l'iframe ne sert à rien, tu peux faire un div avec un lien vide au départ :
<div id="truc_18652" class="pop">
	<a id="lien" href="#">lien</a>
</div>

Puis dans le javascript, tu modifies le href du lien :
$(document).ready(function() {

	$('a.popup[href^=#]').click(function() {
		var popID = $(this).attr('rel'); 
		$('a#lien').attr('href', 'http://monsite.com/?'+popID);
		$('#truc_' + popID).fadeIn();
		return false;
	});
});

0

#5 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 12 janvier 2012 - 16:48

Non, non, désolé, je me suis mal exprimée : tu avais bien compris dans ta première réponse.

je voudrais bien l'affichage de la 2eme page dans la popin (pas l'affichage du lien qui pointe vers 2eme page).

Ce que je disais c'était que je ne voulais en page 1 que l'affichage du lien <a href="#" rel="truc_18652" class="popup" >lien</a>

sans qu'apparaisse : <iframe id="truc_18652" class="pop"></iframe> (ou alors qu'il apparaisse dans le javascript)


1/ mais tu ne m'as pas répondu en ce qui concerne déjà mon point 1/ précédent ?

2/ Comment faire pour créer l'iframe dans le javascript

Merci encore d'essayer de m'aider...

Comme tu vois je nage dans un grand brouillard, heureusement que tu es là...
0

#6 L'utilisateur est en ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 12 janvier 2012 - 17:51

Pour le point 1, je ne vois pas ce que tu entends par

Citation

1/ la récupération du popID se fait bien mais ne s'insère pas à la place de popID dans la ligne : .attr('src', 'http://monsite.com/?id='+popID

Pour vérifier que l'"insertion" entre guillemets se fait bien, il ne faut pas regarder dans le code source (qui bien sûr ne change pas), mais si tu regardes avec Firebug (sur Firefox) ou l'outil de développement de Chrome, tu constateras que le src="blablabla" est bel et bien ajouté à l'élément iframe.

Sinon, pour créer l'iframe à la volée en javascript, tu peux le faire avec la fonction append de jQuery : http://api.jquery.com/append/ Elle n'est pas difficile à comprendre ;)

Mais bon, ce serait quand même plus simple de la créer dès le départ et de la masquer avec display:none puis de la faire apparaître au clic (comme tu le fais d'ailleurs dans ton code).
0

#7 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 12 janvier 2012 - 18:03

Merci Ernestine pour ton éclairage.

Je vais regarder tout cela demain matin d'un oeil neuf.
Désolée pour mes remarques idiotes mais j'apprends :wacko:
0

#8 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 12 janvier 2012 - 18:15

Juste avant de se quitter si tu pouvais me répondre une dernière fois...

Comment se fait-il alors que le code entier que je t'ai donné dans mon post de 15h33 n'affiche pas l'iframe http://monsite.com dans la popin ?

merci
0

#9 L'utilisateur est en ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 13 janvier 2012 - 10:20

C'est normal que ça ne marche pas, tu as mis :
<a href="#" rel="truc_18652" class="popup" >lien</a>

Du coup, popID vaut truc_18652
Et donc '#truc_'+popID vaut truc_truc_18652, ce qui n'est pas du tout l'identifiant de l'iframe.

L'id de l'iframe doit être truc_18652, mais le rel du lien doit être 18652 tout court.
0

#10 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 13 janvier 2012 - 10:26

J'ai téléchargé firebug. J'ai relancé le code de 15h33 et :

1/ le popID n'est pas remplacé par 18652 dans le javascript
2/ et la balise src ne s'insère pas dans l'iframe


voici ce qui apparait dans l'iframe :

<iframe id="truc_18652" class="pop" style="display: inline; width: 400px;">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>


je comprends plus rien...
0

#11 L'utilisateur est en ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 13 janvier 2012 - 10:59

J'ai écrit un message pendant que tu écrivais, je pense que tu ne l'as pas lu ;) Regarde plus haut ^
0

#12 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 16 janvier 2012 - 18:49

Oui, merci Ernestine, j'ai vu ton message.

J'ai pu me remettre sur le code qu'aujourd'hui.
J'ai compris mon erreur :
'#truc_'+popID valant truc_truc_18652 ça ne fonctionnait plus car l'id était truc_18652

Merci encore de m'avoir correctement aiguillée.

Tout fonctionne maintenant.

A bientôt...

Sandy

Ce message a été modifié par Arlette - 16 janvier 2012 - 20:30.

0

#13 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 21 février 2012 - 09:54

Je reviens encore une fois poser une question à ce sujet.

J'aurai voulu mettre le code javascript précédent dans un fichier .js à part pour l'appeller dans la page html avec :

<script type="text/javascript" src="mon-fichier-javascript.js"></script>

Mais il semble que ce ne soit pas possible.

Y-a-t-il quand même une solution ?

Si Ernestine tu pouvais me répondre, ça serait sympa (comme tu avais suivi toute la discussion)...

Sandrine
0

#14 L'utilisateur est hors-ligne   captain_torche 

  • Danacol / Orangina rouge
  • Voir le blog
  • Groupe : Admin
  • Messages : 6 722
  • Inscrit(e) : 08-février 06
  • Genre:Homme
  • Localisation:Savigny / Orge

Posté 21 février 2012 - 10:34

Si, c'est parfaitement possible. Je ne vois pas ce qui pourrait coincer (à part un mauvais chemin vers ton fichier).
Vous avez rêvé cette nuit ? Partagez vos rêves sur l'Onironaute !
Bijoux fantaisie
Recherche nounou
0

#15 L'utilisateur est en ligne   Ernestine 

  • Groupe : Fondatrice
  • Messages : 1 034
  • Inscrit(e) : 21-août 03
  • Genre:Femme

Posté 21 février 2012 - 19:28

Voir le messagesandrinoo, le 21 février 2012 - 09:54, dit :

Si Ernestine tu pouvais me répondre, ça serait sympa (comme tu avais suivi toute la discussion)...

Heu oui, je n'ai rien à ajouter de plus que ce qu'a répondu Captain ci-dessus :)

Ce qui peut aussi empêcher de fonctionner un js externe, c'est quand celui-ci contient des variables définies en php (ça va de soi), mais ce n'est pas ton cas.

Sinon, ouvre ta page avec Chrome et appuie sur F12 pour voir les éventuelles erreurs (comme par exemple un fichier introuvable).
0

#16 L'utilisateur est hors-ligne   sandrinoo 

  • Groupe : Actif
  • Messages : 31
  • Inscrit(e) : 22-octobre 05
  • Genre:Femme

Posté 22 février 2012 - 11:16

Oui merci Captain_Torche et merci Ernestine vous aviez raison tous les 2.

Désolé, c'était un pb de mauvais chemin vers le fichier .js. Souvent, on se persuade que c'est pas possible pour son cas, alors que souvent ça l'est !

Il fallait que je mette ../ devant car l'url appelait un fichier js externe au dossier :

<script type="text/javascript" src="../mon-fichier.js"></script>

C'est vraiment agréable d'avoir des réponses aussi rapides à ses problèmes.

S.
0

Partager ce sujet :


Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)