0

Estou com um probleminha aqui com esse modal form. O JS funciona certinho, porém a janela modal aparece e some rapidamente. Como solucionar?

<a href="" id="signin"><li>Entrar</li></a></a>
                </ul>
            </div>
        </nav>
    </div>
</header>
<!--modal-->
<div class="modal">
    <form class="modal-content animate">
        <div class="imgcontainer">
            <span class="close" title="sair">&times;</span>
            <img src="img/users.png" alt="users" class="avatar">
        </div>
        <div class="container">
            <label for="uname"><b>E-mail</b></label>
            <input type="text" name="uname" placeholder="Entre com o seu e-mail" required>
            <label for="psw"><b>Senha</b></label>
            <input type="password" name="psw" placeholder="insira sua senha">
            <button type="submit">Entrar</button>
            <label>
                <input type="checkbox" name="lembrar" checked="checked">Lembre-ne
            </label>
        </div>
        <div class="container"style="background-color: #f1f1f1">
            <button type="button"  onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancelar</button>
            <span class="psw">Esqueceu a <a href="">senha?</a></span>
        </div>
    </form>

<script>
    document.getElementById("signin").addEventListener("click", function(){
    document.querySelector('.modal').style.display = "block";
});

document.querySelector(".close").addEventListener("click", function(){
    document.querySelector('.modal').style.display = "none";
});
</script>
1
  • Obrigado! Certíssimo ! Commented 4/07/2018 às 20:09

2 Respostas 2

1

Primeiro, não faz sentido algum você colocar um elemento <li> dentro de um elemento <a>:

<a href="" id="signin"><li>Entrar</li></a>

Isso não é permitido pelos padrões da W3C e WHATWG. O correto seria inverter os elementos:

<li><a href="" id="signin">Entrar</a></li>

Segundo, o problema de exibir brevemente o modal é devido ao seu link "entrar". Como você não definir um valor em href, por padrão, ele apontará para a própria URL e, quando clicado, a página é recarregada. As suas opções são:

  1. Definir o valor de href como href="#!", pois assim o navegador tentará redirecionar o usuário para o elemento cujo id="!" e, como provavelmente não existirá, naca acontecerá.

  2. Definir o valor de href como href="javascript:void()", tendo o mesmo efeito que o item anterior; ou

  3. Utilizar o preventDefault() do evento click no seu elemento:

    document.getElementById("signin").addEventListener("click", function(event){
        document.querySelector('.modal').style.display = "block";
        event.preventDefault();
    });
    

Desta forma, você informa ao usuário que não deseja o comportamento normal do clique em uma âncora e o usuário não será redirecionado.

Leituras adicionais:

-1

Eu tava com mesmo problema. No caso eu tinha um botão que acionava o modal. Só que antes do botão tinha um link que cobria o botão ai não pegava, tireo o link e dó deixei o botão veja como tava.inserir a descrição da imagem aqui

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 .