18073 sujets

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

[Contourné] Problème de "popup accessibles" sous IE

Bonjour à tous !

Evidemment, mon problème est dû à ... IE Smiley rale , on s'en serait douté !
J'ai suivi le tutorial pour réaliser des popups accessibles, et plus précisemment, le 2nd, me permettant d'ouvrir la popup au clic sur un lien.

Sous opéra, netscape, firefox, tout fonctionne très bien. Cependant, lorsque je teste avec IE, rien ne va plus !!! Voici un petit aperçu du superbe bug obtenu : upload/3738-bug.jpg
Maginifique, n'est-ce pas ?

Le plus étonnant, c'est que lorsque je teste l'exemple en ligne, là ... il n'y a aucun problème !
Donc, j'ai copier-coller chaque fichier pou être sûre de ne pas avoir fait d'erreur.... et rien ne marche.

Merci à toute bonne âme qui jette un oeil à mon pb Smiley ravi
Modifié par Cygnus (15 Jan 2006 - 22:57)
Pour info, voici les codes utilisés :
<!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" />
<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>

<h1>Des "popups" accessibles !</h1>
<p>En cliquant sur les liens, vous ouvrez une boîte de contenu au-dessus du document, sans ouvrir de nouvelle fenêtre. Elle est donc affichée même avec les navigateurs qui interdisent les popups.</p>

<!-- Les boîtes popup sont placées tout en bas du document -->

<div id="pop1">
<h1>Popup !</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum in mauris vel ipsum viverra tincidunt. </p>
<img src="image.gif" alt="image d'exemple" />
<div class="fermer">fermer la boite en cliquant dessus</div>
</div>


</body>
</html>

popup.js
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;

Style.css
body {
background: #cccc99;
font: 1em verdana, arial, sans-serif;
}


#pop1 {
position: absolute;
top: 5em;
left: 10em;
width: 20em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
cursor: pointer;
font-size: 80%;
}
#pop1 p {
margin: 0 0.3em;
}
#pop1 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;
}

Modifié par Cygnus (15 Jan 2006 - 23:01)
Bonjour,

J'ai le même problème que Cygnus; tout va bien avec Firefox, mais quand j'ouvre la page avec Internet Explorer, le popup est directement affiché et reste affiché tant qu'on ne désactive pas la "sécurité" d'Internet Explorer.
Je cherche donc un moyen pour que le popup ne s'affiche pas au démarrage d'Internet Explorer.
Bonjour à tous,

j'ai eu un soucis identique, que j'ai posté sous une autre forme, jai donc cherché et voila ce que j'ai trouvé.

Voila le javascript:

<script language="javascript">
function bascule(elem)
{
// Quel est l'état actuel ?
etat=document.getElementById(elem).style.visibility;
if(etat=="hidden"){document.getElementById(elem).style.visibility="visible";}
else{document.getElementById(elem).style.visibility="hidden";}
}
</script>


Voila pour la CSS

body{
margin:0;
}

#img_1, #img_2, #img_3{	
	height: 100px;
	width: 200px;
}
#img_1{
	background-color: #FF3300;
}
#img_2{
	background-color: #99CC00;
}
#img_3{
	background-color: #FFFFCC;
}


Et voila pour les boites

<!-- Les liens -->
<a href="#img_1" onClick="bascule('img_1');" >Boite numéro 1</a> 
<a href="#img_2" onClick="bascule('img_2');" >Boite numéro 2</a> 
<a href="#img_3" onClick="bascule('img_3');" >Boite numéro 3</a>

<!-- Les boites -->
<div id="img_1" style="visibility: hidden"> 
	<a href="#img_1" onClick="bascule('img_1');" >Fermer</a>		
</div>
<div id="img_2" style="visibility: hidden"> 
	<a href="#img_2" onClick="bascule('img_2');" >Fermer</a>		
</div>
<div id="img_3" style="visibility: hidden"> 
	<a href="#img_3" onClick="bascule('img_3');" >Fermer</a>		
</div>


Precision:
Je n'ai pas le mérite d'avoir fait le javascript, mais il va dans le meme sens que celui se trouvant sur Alsacréations.

Voila si ca peut aider ou donner des idées.
++
Smiley smile
Bonjour gesualda,

Merci pour ton code qui est fonctionnel. Dans mon cas, je dois placer dans ces boîtes des articles de journaux, de longueur très variable, et j'aurais préféré qu'en cliquant n'importe où sur la boîte, elle puisse se fermer.
Je vais continuer à faire des essais avec ce code.
Salut Gesualda et merci pour ta solution ! Smiley cligne

Elle fonctionne très bien sous ie et ff... Smiley biggrin

Par ailleurs je viens juste de me rendre compte que le pb d'interprétation javascript pouvais également provenir de la sécurité internet : suivant le niveau indiqué, il n'interprête plus et refuse les scripts... Smiley confused

J'éviterais donc maintenant de pousser les protections d'ie au maximum... Smiley langue
Sujet clos
Aller à