Aller au contenu

Popup jquery


sandrinoo

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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é par Arlette
Lien vers le commentaire
Partager sur d’autres sites

  • 1 month later...

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...