Ciao a tutti, ho un problema durante la visualizzazione di un div in modalità modale.
Il div che voglio visualizzare è per una fotogallery; si tratta della foto ingrandita.
Il div viene correttamente visualizzato però la parte "oscurata" della pagina si riferisce solo al div principale della pagina stessa.
La pagina infatti ha un div padre chiamato pagina con dentro altri div che formano il layout della pagina.

Questo è il codice della pagina html:

<body>
<div id="pagina">
<div id="divBackground" class="modal">
</div>
<div style="clear: both;"/>
<div id="divImage" >
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center" colspan = "3" style ="height:500px;">
<img id="imgLoader" alt=""
src="/images/loader.gif" />
<img id="imgFull" alt="" src=""
style="display: none;
height: 500px;width: 600px" />
</td>
</tr>
<tr>
<td align = "left" style="padding:10px;width:200px">
<a id = "Previous" class="CampoTabella" href = "javascript:" onclick = "doPaging(this)" style ="display:none">Indietro</a>
<span id = "lblPrevious" class="CampoTabella">Indietro</span>
</td>
<td align="center" valign="middle" style ="width:200px">
<input id="btnClose" type="button" value="Chiudi finestra" class="BtnBlu"
onclick="HideDiv()"/>
</td>
<td align = "right" style ="padding:10px;width:200px">
<a id = "Next" class="CampoTabella" href = "javascript:" onclick = "doPaging(this)">Avanti</a>
<span class="CampoTabella" id = "lblNext" style ="display:none">Avanti</span>
</td>
</tr>

</table>
</div>
<img id="Image1" onclick="LoadDiv(this.src, this)" src="logo.gif" style="width:180px;border-width:0px;cursorointer" />
</div>
</body>

Questo invece è lo style css:

<style type="text/css">
.modal
{
display:none;
position:absolute;
z-index:999;
top:0;
left:0;
width:100%;
height:100%;
background:#111;
opacity:0.9;
filter:alpha(opacity=90);
padding-top:100px;
color:#fff;
}
#pagina {
background-color: #fff;
margin: 0 auto;
width: 996px;
position:relative;
margin-top: 10px;
height:auto;
z-index: 10;
}
#divImage
{
display: none;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
background-color:#8b9429;
height: 550px;
width: 610px;
padding: 3px;
border: solid 1px black;
}
.dlTable
{
border:double 1px #D9D9D9;
width:180px;
text-align:left;
}
</style>
L'oscuramento della pagina quando visualizzo il div in modalità modale si riferisce a tutto il div pagina.
Come posso fare per farlo visualizzare a tutta la pagina?

Saluti