Superposition de calque

Version imprimable

Bonjour bonjour,

Voilà mon petit problème, je dois afficher des fenêtres modales pour une appli web. Pour faire cela j'ai 2 type de div : une div "overlay" placé directement dans mon <body> et les fenêtres modales dans des divs correspondantes.

J'applique un style css a l'overlay et aux fenêtre modales et j'ajoute un attribut style='display:none'.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .popup{ position:absolute; width: 38%; z-index: 10; top:5%; } div#overlay{ position:absolute; top:0; left:0; background: #000000; z-index:2; width: 100%; height: 100%; }
jusqu'à là pas de problème ça fonctionne sous FF3 IE7 IE8 ... IE6 :lol: mais pas pour FF2 8O

J'utilise les effets Appear et Fade afin d'afficher la div 'overlay' en tant que calque qui se superposera au contenu de ma page afin d'en bloquer l'accès, et la div popup par dessus ce calque grace a un z-index supérieure.

Mais sous FF2 la pop up s'affiche au dessous de l'overlay :/ j'avoue ne pas trop savoir pourquoi, est-ce du a une mauvaise utilisation du z-index ? où un effet de bord de scriptaculous sous FF2 :aie:

Bref je suis toute ouïe et quand même assez étonné que j'ai besoin de faire du debug cross-browser à pour une version de FF :p

18/06/2009, 09h56
gwyohm

C'est assez surprenant en effet,
On peut voir ton code ?
Sinon, une idée comme ca au passage (sans garantie aucune), essaye de mettre un z-index à 9 sur ta classe CSS .popup ; sait on jamais avec un bug bizarre, il s'arrêterait au premier caractère et trouverait donc 1 ... (j'y crois pas beaucoup non plus :aie:)

au debut mon overlay avait un z-index de 2 et mon pop-up de 3 :D (le body est fixé a 1)

Après vous donner tout le code de mon appli je doute que cela vous éclaire les divs pop-up étant contenu dans des <jsp:include> enfin voilà la structure générale de ma page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 
 
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
 
    <title>[...]</title>
 
    <script language="JavaScript" src='/VisualiseurWebApp/js/script.js' type="text/javascript"></script>
    <script language="JavaScript" src='/VisualiseurWebApp/js/prototype.js' type="text/javascript"></script>
    <script language="JavaScript" src='/VisualiseurWebApp/js/scriptaculous.js' type="text/javascript"></script>
 
    <link type="text/css" rel="stylesheet" href='/VisualiseurWebApp/css/style.css' />
    <!--[if IE 6]>
        <link type="text/css" rel="stylesheet" href='/VisualiseurWebApp/css/styleIE6.css' />   
    <![endif]-->
</head>
<body>
 
 
<div id="bandeau">[...]
</div>
 
 
 
<div id="detail">
 
	<div id="detailDocument">
 
 
    	    	<div id="modifierDocument" class="popup" style="display:none;">[...]
    	    	</div>
 
   	     	<div id="ajoutComDocument" class="popup" style="display:none;">[...]
   	    	 </div>	
 
    	    	<div id="rejetDocument" class="popup" style="display:none;">[...]
    	    	</div>
 
 
   	    	 <div id="creerTache" class="popup" style="display:none;">[...]
    	    	</div>
 
   	    	</div>
 
 
<br />
 
 
   	<div id="menu">[...]
   	</div>
 
</div>
 
 
<div id="document">[...]
</div>
 
 
<div id="overlay" style="display:none;" ></div>
 
 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
body {
	margin: 0px;
	padding: 0px;
	font-size: 11px;
	font-family: tahoma;
	color: #000000;
	min-width: 1255px;
	min-height:840px;
	height: 100%;
	background: #FFFFFF url(../images/fondPage.png) repeat-x ; 
	z-index: 1;
}
 
div#detail {
 
	height: 800px;
	width: 38%;
	float:left;
	overflow:auto;
	margin-left:5px;
	margin-right: 5px;
}
 
.popup{
	position:absolute;
	width: 38%;
	z-index: 3;
	top:5%;
}
 
div#overlay{
	position:absolute;
	top:0;
	left:0;
	background: #000000;
	z-index:2;
	width: 100%;
	height: 100%;
}
div#menu {
 
   width:98%;
 
}
 
div#bandeau {
	width: 1250px;
}
div#document {
	height: 800px;
	width: 61%;
	float: right;
}

Je rappel que cela ne fonctionne pas SEULEMENT sur Mozilla Firefox 2.X :aie: