Oups désolé, le voici (ca sera plus simple que les devinettes !) :
Voici le html :
…
<head>
<title>Une popup accessible</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<script type="text/javascript" src="popup.js"></script>
<style type="text/css">
<!--
@import url(style.css);
-->
</style>
</head>
<body>
<p>
<a href="#pop1" class="pop">Lien (ouvre pop1)</a>
</p>
<!-- Les boîtes popup sont placées tout en bas du document -->
<div id="pop1">
<h1>Popup 1</h1>
<p>Test pop up 1</p>
<div class="fermer">fermer la boite en cliquant dessus</div>
</div>
</body>
</html>
Voici le javascript :
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;
Voici 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;
}
Ca doit être un truc tout con mais je vois pas !
Modifié par Elo44 (06 Jun 2005 - 14:52)
