CSS3 Modal window does not work

Asked

Viewed 72 times

0

I’m trying to create several help links in modal windows, and the tests work well, but when combined with other elements of the page does not appear.

Below the example of the tests

<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 the display on the page:

<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 an example of the code on the page (the one that doesn’t 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 have placed all the elements so that I can demonstrate and locate the possible conflict.

css

  • The only problem I see is that the div "flx" is with margin-left negative. On the selector #bgf:target ~ .flx, that puts modal in the scene, you put a top positive, but forgot the margin-left.

  • I tried to do what you recommended, but it didn’t work either. I will edit the post with another example

  • Dude, it’s working for me without any changes to your new code. I just copied and pasted in Jsfiddle: https://jsfiddle.net/nunks/1v99wj2r/

1 answer

2


The problem is in id of div of "Aguade, ..." that is conflicting with the id #fluxo modal, which is the id correct referenced on the anchor href="#fluxo":

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

Change that id to another different name that the 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>

  • From what I understand, the anchor #fluxo serves precisely to activate the CSS subseletor :target of div through the class .modalDialog. This is what makes the modal work without Javascript. Even if this were not the case, the use of # in anchors is not precisely the original reason for the existence of the attribute id, even before they invented CSS?

  • @nunks.lol If it’s the original reason I can’t say, however I think the id would be one more way to give a unique identity to an element if it needs to be referenced later (in JS, for example).

  • 1

    Yes, I was going to delete my comment, because now I understood his answer: he has two div with the same id. I agree that this is wrong, I just thought originally you were saying that the fact that the anchor call one href #fluxo conflicted with the fact that there is a div with id "flow"...

  • @nunks.lol That’s right. I messed up on the answer but I corrected it. Thanks!

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.