7 replies to this topic

[Neffertine]

Olá pessoal!


Minha página é feita de um cabeçalho, cuja CSS Position é fixed e do conteúdo. Estou usando o Ajax toolkit para .net.
Acontece que ao criar uma janela modal, ela não 'expande' a area opaca até a div que está fixed.
Ou seja, era para toda a pagina ficar toda em preto, mas o cabeçalho que é fixo não recebe a cor do modal.

Alguém já viveu esse problema, ou sabe como corrigí-lo?

Peço encarecidamente a ajuda de vocês

[bimonti]

Tem o site online pra entender melhor o que acontece ?

[Neffertine]

Bimonti,

Nao tneho on line pois é um sistema web que a empresa que eu trabalho está desenvolvendo.

Mas segue um print Screen do que acontece quando aciono a modalpopup:




Veja que a parte 'preta' da modal não se expande no cabeçalho, onde a div é fixa...

Edição feita por: Neffertine, 21/05/2008, 10:05.

[bimonti]

Aí já é uma questão de CSS...

Essa área preta tem position absolute ?!

[Neffertine]

Bimonti,


Segue o css... já testei como absolute também e não deu certo... O negócio fica por baixo da div que é fixed.

[codebox]/*Modal Popup*/
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
height:100%;
position:fixed;
z-index:100;
}

.modalPopup {
background-color:#ffffdd;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
position:fixed;
z-index:100;
}

.sampleStyleA {
background-color:#FFF;
}

.sampleStyleB {
background-color:#FFF;
font-family:monospace;
font-size:10pt;
font-weight:bold;
}

.sampleStyleC {
background-color:#ddffdd;
font-family:sans-serif;
font-size:10pt;
font-style:italic;
}

.sampleStyleD {
background-color:Blue;
color:White;
font-family:Arial;
font-size:10pt;
}[/codebox]

[bimonti]

Aí no seu CSS está os 2 com position fixed, e com z-index igual ... tem que ser valores diferentes...

[Neffertine]

Bimonti...

Esse é o CSS apenas da Modal...
A div do cabeçalho está assim:

#dv_cabecalho
{
position:fixed;
left:0px;
top:0px;
width:1002px;
height:200px;
background:#ffffff;
z-index:10;
}

Como pode ver o z-index é muito menor. E ela é fixed mesmo.

[bimonti]

Eu fiz um teste aqui, veja como é simples. Position absolute e z-index:

CSS:

html,body{
	margin: 0px;
	padding:0px;
}
#fix{
	position:fixed;
	top:0; bottom:0;
	width :90%;
	height:100px;
	background:#f00;
	z-index:auto;
}
#abs{
	position:absolute;
	margin:0px;
	width: 100%;
	height:100%;
	background:#000;
	opacity:0.5;
	z-index:100;
}

HTML:

<div id="fix"></div>
<div id="abs"></div>

Movi para CSS.