Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Dúvida site. função onclick nao executa

Estou com um problema no meu código. Criei dois Modals. Os dois possuem um span "close" para fechar o modal, porém só funciona no primeiro. Quando tento fechar o segundo modal clicando no X, ele não funciona. Os modals estão no hover do Login.

Aqui está o código:

Pasta

https://github.com/vkindrat/vkindrat.github.io/tree/master/site-loja

Exemplo nessa URL, hover no Login, segundo elemento

https://vkindrat.github.io/site-loja/test.html

1 resposta
solução!

Vitor, boa tarde!

Eu fiz alguns testes e usei uma técnica chamada event delegation, então ao invés de colocar o evento no próprio botão close, adicionei o evento no elemento pai, que é o próprio modal, visto isso, ele fica escutando o evento de clique, quando o clique é feito ele verifica se o foi no botão close, caso seja ele fecha, caso contrário não é necessário fazer nada.

Para isso eu coloquei uma classe em ambos os modais e alterei a forma em que eles são abertos nos eventos. O documento ficou assim:

let modalList = document.querySelectorAll(".modal");
let abreModal = document.querySelector(".abre-modal");
let abreModalCadastro = document.querySelector(".abre-modal-cadastro");

abreModal.onclick = function(){
    modalList[0].style.display = "block";
}

abreModalCadastro.onclick = function(){
    modalList[1].style.display = "block";
}

modalList.forEach(function(modal){
    modal.onclick = function(event){
        if (event.target.classist.contains('close')){
            modal.style.display = "none";
            modal.style.display = "none";    
        }
    }
})

E no html adicionei a classe modal na div:

<div id="modal-login" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <p>Login</p>
                    <input type="text" name="">
                    <p>Senha</p>
                    <input type="password" name="">
                    <button class="botao-entra" type="submit">Entrar</button>
                </div>
            </div>

            <div id="modal-cadastro" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <p>Login</p>
                    <input type="text" name="" required="required">

                    <p>E-mail</p>
                    <input type="E-mail" name="" required="required">

                    <p>Senha</p>
                    <input type="password" name="" required="required">
                    <button class="botao-entra" type="submit">Cadastrar</button>
                </div>
            </div>

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software