Skip to main content
adicionou 7 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127

O problema está na id da div de "Aguade, carregando..." que está conflitando com oa hrefid #fluxo da modal, que é a id correta referenciada na âncora href="#fluxo":

O problema está na id da div de "Aguade, carregando..." que está conflitando com o href #fluxo:

O problema está na id da div de "Aguade, carregando..." que está conflitando com a id #fluxo da modal, que é a id correta referenciada na âncora href="#fluxo":

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 127

O problema está na id da div de "Aguade, carregando..." que está conflitando com o href #fluxo:

<div id="fluxo" style="border:0px #CCCCCC solid;" >Aguade, carregando...</div>

Altere essa id para outro nome diferente que a modal funcionará.

.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;
}
<article class="item">
    <fieldset>
        <legend style="font-family: padrao; font-size: 12pt; color: #6e8355;">Fluxo de Caixa</legend>
          <div id="sfluxo" 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="" 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="" 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>
<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>