Modal window in CSS3 does not work

I'm trying to create multiple help links in modal windows, and the tests works fine, but when combined with other elements of the page does not appear.

Below the test example

<style>

.modalDialog{
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity: 400ms ease-in;
    -moz-transition: opacity: 400ms ease-in;
    transition: opacity: 400ms ease-in;
    pointer-events: none; 
}

.modalDialog:target{
    opacity: 1;
    pointer-events: auto;
}

.modalDialog > div{
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.modal > div{
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 15px 20px;
    background: #fff;
}

.close{
    background: #606061;
    color: #ffffff;
    line-height:25px;
    position: absolute;
    right: -12px;
    text-align:center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 1px 1px 3px #000;
    -moz-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover{
    background: #0fb506;
}
</style> 

For pageview:

<a href="#fluxo">abrir</a>
<div id="fluxo" class="modalDialog">
    <div>
        <a href="#close" title="Fechar" class="close">X</a>
        <h2>Fluxo de Caixa</h2>
        <p>Aqui vai a explicação</p>
    </div>
</div>

Now I'll give you an example of the code on the page (the one that does not work):

<article class="item">
    <fieldset>
        <legend style="font-family: padrao; font-size: 12pt; color: #6e8355;">Fluxo de Caixa</legend>
          <div id="fluxo" style="border:0px #CCCCCC solid;" >Aguade, carregando...</div>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr valign="middle">
                <td class="keis" width="10"><img src="../images/interrogation.png" border="0" width="16" height="16" alt="O que significa essa informação?" title"O que significa essa informação?" style="padding-left:5px; padding-top:5px;"></td>
                <td width="108"><a href="#fluxo" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#666666; padding:5px; text-decoration:none;">O que é isso?</a></td>
                <td width="10"><img src="../images/exclamation.gif" border="0" width="16" height="16" alt="Ver detalhes" title"Ver detalhes" style="padding-left:5px; padding-top:5px;"></td>
                <td width="*"><a href="det.php?id=lub&band=<?php echo $band; ?>&rg=<?php echo $rg; ?>&uf=<?php echo $uf; ?>&emp=<?php echo $emp; ?>?ini=<?php echo $ini; ?>&fim=<?php echo $fim; ?>" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#d51414; padding:5px; text-decoration:none;">detalhes</a></td>
                <td width="*">&nbsp;</td>
              </tr>
            </table>

    </fieldset>
</article>

I put all the elements so that you can demonstrate and locate any conflict.