Superposition de calque

**lifty** · 17/06/2009, 15h36

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mais pas pour FF2

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

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

**gwyohm** · 18/06/2009, 08h56

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

)

**lifty** · 18/06/2009, 14h40

au debut mon overlay avait un z-index de 2 et mon pop-up de 3

(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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Superposition de calque

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager