0

Estou tentando criar vários links de ajuda em janelas modais, e nos testes funciona bem, mas quando combinado com outros elementos da página não aparece.

Abaixo o exemplo dos testes

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

Para a exibição na página:

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

Agora vou dar um exemplo do código na página (aquele que não funciona):

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

Coloquei todos os elementos para que possa demonstrar e localizar o eventual conflito.

3
  • O único problema que vejo é que o div "flx" está com margin-left negativa. No seletor #bgf:target ~ .flx, que coloca o modal em cena, você colocou um top positivo, mas esqueceu do margin-left.
    – nunks
    Commented 11/10/2017 às 3:54
  • Tentei fazer o que você recomendou, mas também não deu certo. Vou editar o post com outro exemplo Commented 12/10/2017 às 0:28
  • Cara, aqui pra mim tá funcionando sem nenhuma alteração esse seu código novo. Só copiei e colei no JSFiddle: jsfiddle.net/nunks/1v99wj2r
    – nunks
    Commented 12/10/2017 às 2:25

1 Resposta 1

2

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

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

4
  • Pelo que entendi, a âncora #fluxo serve justamente para ativar o subseletor CSS :target do div através da classe .modalDialog. É isso que faz o modal funcionar sem JavaScript. Mesmo se não fosse esse o caso, o uso de # em âncoras não é justamente o motivo original da existência do atributo id, mesmo antes de inventarem o CSS?
    – nunks
    Commented 12/10/2017 às 2:29
  • @nunks.lol Se é o motivo original eu não sei dizer, porém acho que o id seria mais uma forma de dar uma identidade única a um elemento, caso seja necessário referenciá-lo posteriormente (em JS, por exemplo).
    – Sam
    Commented 12/10/2017 às 2:34
  • 1
    Pois é, eu já ia deletar meu comentário, porque agora entendi a sua resposta: ele tem dois div com o mesmo id. Concordo que isso é errado, só achei originalmente que você estivesse dizendo que o fato de a âncora chamar um href #fluxo conflitava com o fato de existir um div com id "fluxo"...
    – nunks
    Commented 12/10/2017 às 2:38
  • @nunks.lol Isso mesmo. Fiz confusão na resposta mas já corrigi. Valeu!
    – Sam
    Commented 12/10/2017 às 2:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .