Popup jquery

sandrinoo · 12 Janvier 2012

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

**Ernestine** · 12 Janvier 2012

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

sandrinoo · 12 Janvier 2012

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 ?

**Ernestine** · 12 Janvier 2012

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;
	});
});

sandrinoo · 12 Janvier 2012

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à...

**Ernestine** · 12 Janvier 2012

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

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).

sandrinoo · 12 Janvier 2012

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:

sandrinoo · 12 Janvier 2012

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

**Ernestine** · 13 Janvier 2012

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.

sandrinoo · 13 Janvier 2012

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...

**Ernestine** · 13 Janvier 2012

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

sandrinoo · 16 Janvier 2012

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

Modifié 16 Janvier 2012 par Arlette

sandrinoo · 21 Février 2012

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 :

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

**captain_torche** · 21 Février 2012

Si, c'est parfaitement possible. Je ne vois pas ce qui pourrait coincer (à part un mauvais chemin vers ton fichier).

**Ernestine** · 21 Février 2012

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).

sandrinoo · 22 Février 2012

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 :

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

S.

Connexion

Popup jquery

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter