18042 sujets

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

Problème tutorial de popup sans fenêtre web

Hello,

jai lu votre tutorial très intéressant sur la manière d'ouvrir des popup sans nouvelle fenêtre (Faire apparaître des popups sans nouvelle fenêtre)
édit par Igor: merci de faire de vrai liens pour les urls à rallonge

Par contre lorque que j'ai voulu implémenter ce type de popup dans mon site, pas moyen de les faire fonctionner.
Du coup comme je ne suis pas un expert Javascript j'ai essayé de recopier directement les pages et scripts donnés en exemple pour en comprendre le fonctionnement.
Mais là encore ça ne marche pas. le symptôme est que la DIV de la popup s'affiche en bas de page au lieu de s'afficher en superposition.

Du coup je me demande si il n'y a pas une coquille qui s'est glissée dans le tutorial ? Ou si non, j'apprécierai un coup de main pour le faire fonctionner.

En tout cas merci d'avance de vous pencher mon ch'ti pb.

A++ Smiley smile
Modifié par Igor (28 Aug 2006 - 14:21)
Salut Koala,

j'ai regarder le post donc tu m'as donné le lien, mais je ne suis pas vraiment sur que ça corresponde avec mon pb. J'ai bien testé certains des conseils que tu aavais donné dans ce post mais sans véritable succès.
En fait dans mon cas j'ai comme l'impression que c'est le z-index de mon css qui me tourne en bourique. Comme dit j'ai essayé en copiant de manière bête et méchante l'exemple donné dans le tuto.

Enfin si tu as un petit moment je te mets mon HTMl, le CSS et le JS que j'ai récupéré dans l'exemple du tuto.
Comme di chez moi le pb c'est que la DIV apparait et disparait bien comme il faut mais elle semble se mettre dans la page au lieu de se superposer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Une popup accessible</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<LINK REL="stylesheet" type="text/css" HREF="./style.css">
<script type="text/javascript" src="popup.js"></script>
</head>
<body>

<h1>Une "popup" accessible !</h1>
<p>
<a href="#pop1" class="pop">Lien (ouvre pop1)</a> -
 <a href="#pop2" class="pop">Lien (ouvre pop2)</a>
</p>
<p>Contenu général de la page.</p>

<!-- Les boîtes popup sont placées tout en bas du document -->
<div id="pop1">
<h1>Popup !</h1>
<p>Une popup</p>
<div class="fermer">fermer la boite en cliquant dessus</div>
</div> 

<div id="pop2">
<h1>Annonce</h1>
<p>Autre popup sur la page</p>
<div class="fermer">fermer la boite en cliquant dessus</div>
</div>

</body>
</html>


Voilà le CSS :

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



Et le js pour finir :

function pop()
{
    var myAs = document.getElementsByTagName('a');
    for (var a = 0; a < myAs.length; ++a) {
	// Si le lien a une classe de type pop
        if (myAs[a].className == 'pop') {
	// on extrait l'id de la popup à partir du href
            var pop = document.getElementById(myAs[a].href.substring(myAs[a].href.lastIndexOf('#') + 1));
	// si la popup existe on l'affiche (display block)
            if (pop) {       
                pop.style.display = 'none';
                myAs[a].onclick = function() {
                    thisPopup = document.getElementById(this.href.substring(this.href.lastIndexOf('#') + 1))
                    thisPopup.style.display = (thisPopup.style.display == 'none') ? 'block' : 'none';
                    return false;
                };
		// on efface la popup en cliquant dessus
                pop.onclick = function()
                {
                    this.style.display = 'none';
                };
            }
        }
    }
}
 
window.onload = pop;



Eucalyptusément votre


A+++ Smiley biggrin
Modérateur
Si tu regardes ton code xhtml, il n'est pas identique à celui indiqué dans le tutoriel. Le peu qui change rend ta page invalide, ce qui ne t'assure de rien en terme de rendu. Smiley cligne
Tu parles de la partie de déclaration du fichier CSS. Tu as raison j'ai oublié de faire un retour arrière après certains tests.
En fait j'ai également fait l'essai avec la méthode d'insertion du css comme fournie dans le tutoriel et j'ai le même problême.
J'ai égélement essayé en incluant la partie CSS directement dans la page HTML, idem que pour les deux autres solutions

Smiley confus
Modérateur
Dans le code que tu m'as indiqué, le CSS et le JS sont identiques au tutoriel. Seul la partie XHTML change. Si tu regardes le tuto, çà fonctionne... donc ? Smiley cligne

Si vraiment tu bloques, peux-tu mettre un exemple en ligne ? Es-tu certain d'avoir une page XHTML valide déjà ?
Hello,

déjà désolé pour ma réponse tardive, j'ai refais le test avec la page XHTML du tutorial et j'obtiens toujours le même résultat (J'ai fais tout simplement un copier collé des pages XHTML, JS et CSS).
En fait, je maitrise pas vraiment le javascript Smiley cligne , mais j'ai l'impression qu'il y a un soucis dans l'affection de la class CSS à la div servant de popup.
J'ai essayé de modifier des paramètre dans le css comme les couleurs par exemple mais seul le body prend en compte mes modifications.
Du coup si effective la div ne voit pas le paramètre z-index, je suppose qu'elle ne pourra effectivement pas se supperposer et sera donc affichée en bas de ma page.

Pour la mise en ligne je n'ai pas le faire pour le moment, en fait mon appli est un projet intranet. Je dois d'abord ouvrir un compte chez un hébergeur Smiley biggrin . Mais comme dit ce coup ci j'ai vraiment juste copier/coller les sources données dans le tuto.

En tout cas merci de ton aide

A++
Modérateur
Salut,

euh... ben, en fait, je serais curieux de voir çà, oui parce que je ne comprends pas vraiment comment tu peux obtenir un résultat différent si tu te contentes d'un simple copier-coller. Lorsque tu cliques sur le lien au sein même du tuto, çà marche non ? ... parce que chez moi, oui. Smiley ohwell
Exactement le même constat.

J'ai essayé d'intégrer ça dans le site que je fais pour faciliter l'utilisation.
Ca ne fonctionne pas.

Je teste ça en local, je créée les 3 fichiers nécessaire, je fais un copier coller.. et ça marche pas.

Je vais sur le tutoriel et paf ça marche Smiley eek

Soit le code donné contient une erreur ? (ça peut arriver à n'importe qui) soit ce script à un problème très étrange
Modifié par Paul-Hewson (05 Sep 2006 - 14:50)
J'ai trouvé la coquille.. le fichier CSS donné dans le tutoriel est erroné.

Celui de la page présentant l'exemple est bon. (j'ai ouvert la source de l'exemple et j'ai remplacé mon copier coller du style.css pris dans le tutoriel et le popup s'enclenche comme il faut).

Je vais analyser le code de la feuille de style pour voir d'où viens le problème.

Bon alors c'est pas compliqué, y a un problème de nommage entre le fichier css donné et l'exemple 2.

En fait le fichier Css n'est valable que pour le premier exemple. On est obligé de les modifier. Ainsi les classes doivent devenir #pop1 #pop2 etc..

Je n'y ai pas du tout prêté attention au départ. Du coup c'est pas "modifier si besoin" mais plutôt "pensez à modifier le fichier css" qu'il faudrait mettre Smiley murf Smiley lol

Tiens, sinon récupères le bon fichier CSS de l'exemple ici :

style.css
Modifié par Paul-Hewson (05 Sep 2006 - 15:20)
Hello,

effectivement le problème vient bien du CSS, en fait la classe #pop du CSS doit être renommé avec l'ID de la DIV de la popup (pop1 dans le tuto par exemple, plus la dupliqué pour faire pop2).
En fait l'association du CSS se fait soit par l'attribut CLASS, qui permet d'utiliser le même style plusieurs fois dans le document, soit par l'attribut ID qui lui doit être unique et ne permet donc pas de réutiliser un style dans un document (A moins de le dupliquer dans le CSS).

Au niveau du tutorial, se n'est pas vraiment une coquille puisqu'il précise qu'il faudra adapté le fichier CSS. Par contre il est qu'une petite précision (pour nous les débutants) serait la bien venu, comme une petite phrase du style "Attention !! la classe CSS #pop du fichier style.css devra être renommé en fonction de l'ID de la DIV contenant la popup."

En tout cas merci pour le coup de main

A++
Sujet clos
Aller à