Modal Form Login appears once and disappears at the same time

Question

I have a problem here with this modal form. JS works fine, but the modal window appears and quickly disappears. How to solve?

<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>

Answer 1

First, it makes no sense for you to put an element <li> within an element <a>:

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

This is not allowed by W3C and WHATWG standards. The correct would be to reverse the elements:

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

Second, the problem of briefly displaying the modal is due to your "log in" link. As you do not set a value in href, by default, it will point to the URL itself and when clicked, the page is reloaded. Your options are:

1. Define the value of href as href="#!", so the browser will try to redirect the user to the element whose id="!" and, as it probably will not exist, naca will happen.

2. Define the value of href as href="javascript:void()", having the same effect as the previous item; or

3. Use the preventDefault() of the event click in its element:

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

This way, you inform the user that you do not want the normal behavior of clicking an anchor and the user will not be redirected.

Additional readings:

• "href" attribute for Javascript links: "#" or "javascript:void(0)"?
• What is the difference in use of Return false, Event.stopPropagation() and Event.preventDefault()?
• How to prevent a click on a link/anchor or tied event element
• What is the purpose of the "Return true;" command at the end of a function?
• Why "Return false;" in a click event cancels the opening of the link?

Answer 2

I was in real trouble. In this case I had a button that triggered the modal. Only before the button had a link that covered the button ai did not pick, take the link and C left the button see how it was.