Modal window in CSS3 does not work

0

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.

    
asked by anonymous 11.10.2017 / 05:37

1 answer

2

The problem is with id of% Aguade, loading ... "which is conflicting with div id of modal, which is #fluxo correct referenced in anchor id :

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

Change this href="#fluxo" to a different name than modal will work.

.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>
    
12.10.2017 / 04:24