Javascript and css popup window

Asked

Viewed 116 times

0

I’m making some cards that when I click in it shows in the middle of the screen a popup with the inlays of each card , I did a function in javascript , card 1 worked well , but card 2 it opens the inlets of card 1, would I have to create an open and close function for each card ?

HTML

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Card Hover Effects</title>
    
</head>

<body>
    

    <div class="container">
    
        <div class="card">
            <div class="content">
                <h2>R001</h2>
                <p>Consulta DBE</p>
                <a href="javascript:open();">Entrar</a>
                <div id="popup" class="popup">
                    <p> Roda na VM01 ás 7hrs e 15 hrs <br>   
                        Se der Terminated porque não achou tela de login no site da receita, rodar de novo.
                         Em algumas VMs esse erro acontece por não achar o botão para prosseguir
                          (preenche o CPF e depois clica nesse botão) para a tela de login.
                           A Fernanda coloca manualmente o zoom do navegador em 200%, aí ele acha o botão.
                            Se rodar na madruga apenas em uma VM, não precisa rodar em outra. 
                            Se tiver itens na fila, pode rodar logo de manhã, senão,
                             deixa pro próximo agendamento. Não tem problema rodar mais q 2x e nem 1x, 
                             mas o correto são 2 vezes ao dia, Madrugada e a tarde.
                              Tem 2 agendamentos na madrugada, porque em alguns dias, 
                              tem 200 itens para processar, mas em geral é na faixa de 20 itens. 
                              Só faz consulta, nada de lançamento.</p>
                    <a href="javascript: close();">Fechar</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R002</h2>
                <p>Payment Inquiry</p>
                <a href="javascript:open();">Entrar</a>
                <div id="popup" class="popup">
                    <p> Roda na VM01 ás 7hrs e 15 hrs <br>   
                        Se der Terminated porque não achou tela de login no site da receita, rodar de novo.
                         Em algumas VMs esse erro acontece por não achar o botão para prosseguir
                          (preenche o CPF e depois clica nesse botão) para a tela de login.
                           A Fernanda coloca manualmente o zoom do navegador em 200%, aí ele acha o botão.
                            Se rodar na madruga apenas em uma VM, não precisa rodar em outra. 
                            .</p>
                    <a href="javascript: close();">Fechar</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R003</h2>
                <p>Proposta Item</p>
                <a href="#">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R004</h2>
                <p>Admissão</p>
                <a href="lista.php">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R005</h2>
                <p>Payment GRM</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R006</h2>
                <p>Rescisão</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R007</h2>
                <p>Conciliações Bancarias</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R008</h2>
                <p>Pagamentos RH</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R009</h2>
                <p>Fretes</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R010</h2>
                <p>Prposta Item fluxo</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R011</h2>
                <p>IES</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R012</h2>
                <p>KIT Rescisão</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R013</h2>
                <p>Evidências</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R014</h2>
                <p>Inventário de Tanques</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R015</h2>
                <p>Comex</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R016</h2>
                <p>Background Check</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R017</h2>
                <p>Ànalises RC PATI</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R018</h2>
                <p>Envio de Layout</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R019</h2>
                <p>Processamento NF Serviço P72</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R020</h2>
                <p>Alteração Cadastro Frota</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R021</h2>
                <p>Processamento NF Serviço Moove</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R022</h2>
                <p>Simulação de NFs de Material</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R023</h2>
                <p>Envio de Relatórios CIA</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R024</h2>
                <p>Relatórios Comercial</p>
                <a href="">Entrar</a>
            </div>
        </div>
    
    <div class="card">
            <div class="content">
                <h2>R025</h2>
                <p>Rodada MRP</p>
                <a href="">Entrar</a>
            </div>
        </div>
        <div class="card">
            <div class="content">
                <h2>R026</h2>
                <p>Chamados CRD</p>
                <a href="">Entrar</a>
            </div>
            </div>
            
    </div>
    
</body>

<script type="text/javascript">
    function open(){
        document.getElementById('popup').style.display ='block';
        
        }
    function close(){
        document.getElementById('popup').style.display='none';
    }
    
    
    </script>

</html> ```

-

** CSS **

``` <style>
    @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


#logo{
    margin-top:-550px;
    margin-left:-160px;
    border-radius:10px;
    -webkit-box-reflect:below 1px linear-gradient(transparent,#0005);
}
.popup{
    position: absolute;
    justify-content: center;
    top: 100px;
    margin: auto;
    width: 800px;
    height: 600px;
    padding: 10px;
    border: solid 1px #4c4d4f;
    background: #f5821a;
    display: none;
    transition: 0.5s;
    
    }
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(0deg,#fff 50%, #2196F3);
    background-repeat:repeat;
}
.container
{
    max-width: 1000px;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    transition: 0.5s;
}
.container:hover .card
{
    filter: blur(0px);
    transform: scale(.7);
}
.container .card
{
    position: relative;
    width: 250px;
    height: 300px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    border-radius: 10px;
    transform: scaleY(1);
    transform: scaleX(0.9);
    transform: scale(.8);
    


}
.container .card:hover
{
    filter: blur(0px);
    transform: scale(1);
}
.container .card:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #2196F3;
    z-index: 1;
    transition: 0.5s;
    border-color: #000;
    border-radius: 10px;
    
}
.container .card:hover:before
{
    background: #000;
    transform: scaleY(1.15);
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
.container .card:after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transition: 0.5s;
    background: rgba(255,255,255,.1);
    z-index: 1;
}
.container .card:hover:after
{
    transform: scaleY(1.15);
}
.container .card:hover
{
    z-index: 1;
}
.container .card .content
{
    text-align: center;
    z-index: 2;
    padding: 0 20px;
    transition: 0.5s;
}
.container .card:hover .content
{
    color: #fff;
}
.container .card .content h2
{
    font-size: 2em;
}
.container .card .content p
{
    font-size: 0.9em;
}
.container .card .content a
{
    display: inline-block;
    margin-top: 15px;
    padding: 5px 10px;
    background: #262626;
    color: #fff;
    text-decoration: none;
}
.container .card:hover .content a
{
    background: #2196F3;
}
</style>```
javascript html css

1 answer

0


Opa Nicholas, to solve the problem ai is very simple. As you are leaving static in the function that the popup that will be opened is the id="popup", it will always interact with this element.

One way to solve this is to pass the id of the popup you want as parameter in your click, hence the function is dynamic according to the element you want :)

    // pega o id como parâmetro para referenciar o elemento na DOM
    function open(id){
       document.getElementById(id).style.display ='block';
    }

    function close(id){
       document.getElementById(id).style.display='none';
    }

So in your html, it would look like this, in every element:

href="javascript:open('popup');"
href="javascript:open('popup2');"

An example:

function funcaoLegal(idElemento) {
        document.getElementById(idElemento).style.display = 'block'
    }
.quadrado {
        display: none;
        height: 100px;
        width: 100px;
        background-color: #b00;
        margin: 10px;
    }

    #quadrado2 {
        background-color: #bb0;
    }

    #quadrado3 {
        background-color: #3b7;
    }

    #quadrado4 {
        background-color: #307;
    }
<body>
    <a onclick="funcaoLegal('quadrado1')">Quadrado 1</a>
    <a onclick="funcaoLegal('quadrado2')">Quadrado 2</a>
    <a onclick="funcaoLegal('quadrado3')">Quadrado 3</a>
    <a onclick="funcaoLegal('quadrado4')">Quadrado 4</a>

    <div class="quadrado" id="quadrado1"></div>
    <div class="quadrado" id="quadrado2"></div>
    <div class="quadrado" id="quadrado3"></div>
    <div class="quadrado" id="quadrado4"></div>
</body>

I hope I helped, hug :)

  • opa obgdo , so I would have to do a function for each card? I thought that and did , but I thought I could only do one function and open the popups of each card , passing the id in onclick for example , almost equal to yours that you sent

  • Oops, don’t forget to mark the question as answered. And it has how to do this too, in case you refer to write in all the elements the function right? In that case you would have to create a function by taking any click on the element <a> you want for example. Then, you wouldn’t need to keep declaring in html on all buttons.

Browser other questions tagged javascript html css

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