Bonjour,
Je rencontre un problème avec la mise en place de pop up en CSS + JS.
Jusqu'à la 5ème pop up pas de problème, mais dès que je veux créer la sixième, elle ne veut pas s'afficher !
Vous trouverez l'exemple sur ma homepage, c'est le 6ème lien dans le corps de texte.
La feuille JS
Ma CSS spéciale popup
Mon lien
EDIT : pfff, alors que j'allais éditer pour rajouter
Je m'aperçois que je n'avais pas fermé la div précédente <div id="pop5"> ! (rapidement) [Réglé]
Modifié par karnabal (05 Jul 2006 - 11:41)
Je rencontre un problème avec la mise en place de pop up en CSS + JS.
Jusqu'à la 5ème pop up pas de problème, mais dès que je veux créer la sixième, elle ne veut pas s'afficher !
Vous trouverez l'exemple sur ma homepage, c'est le 6ème lien dans le corps de texte.
La feuille JS
gk=window.Event?1:0; // navigateurs Gecko ou IE
D=document;popup=encours=0
function ctrl(e)
{
de=!D.documentElement.clientWidth?D.body:D.documentElement // IE6
sx=gk?pageXOffset:de.scrollLeft //scroll h
sy=gk?pageYOffset:de.scrollTop //scroll v
x=gk?e.pageX:event.clientX+sx; //curseur x
y=gk?e.pageY:event.clientY+sy; //curseur y
el=gk?e.target:event.srcElement;
if(!el.tagName)el=el.parentNode; // noeud #text
if(el.className == 'pop')
{
popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1)).style;
if(popup!=encours) // seulement si changement
{
encours.display='none';
with(popup){display="block";left=x+'px';top=y+10+'px';}
encours=popup;
}
} else {encours.display='none';encours=0}
}
D.onmousemove=ctrl
// charge la feuille de style des popups.
D.write('')
Ma CSS spéciale popup
#pop1, #pop2, #pop3, #pop4, #pop5, #pop6, #pop7 {
position:absolute;
top:50px;
display:none;
width: 18em;
border:2px double black;
background: #FF9100;
z-index: 1500;
font-size: 100%;
margin-left:0px;
margin-right:0px;
margin-top:30px;
}
#pop1 p, #pop2 p, #pop3 p, #pop4 p, #pop5 p, #pop6 p, #pop7 p {
margin:0px 6px 2px 6px;
}
#pop1 h3, #pop2 h3, #pop3 h3, #pop4 h3, #pop5 h3, #pop6 h3, #pop7 h3 {
font-size: 100%;
margin: 0 0 0.5em 0;
border-bottom: 1px solid black;
background: white url(top.gif) left top repeat-x;
text-align: center;
}
Mon lien
<sup><a href="#pop6" class="pop"> ★</a></sup>
EDIT : pfff, alors que j'allais éditer pour rajouter
<div id="pop6">
<h3>Bidule</h3>
<p>Blablabla</p>
</div>
Je m'aperçois que je n'avais pas fermé la div précédente <div id="pop5"> ! (rapidement) [Réglé]
Modifié par karnabal (05 Jul 2006 - 11:41)