Modal Form Login appears once and disappears at the same time

Question

Modal Form Login appears once and disappears at the same time

Navigation

#1 by (0 votes)

0

I have a problem here with this modal form. JS works fine, but the modal window pops up and disappears quickly. 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>

javascript css login modal

asked by anonymous 04.07.2018 / 21:24

1 answer

PHP - Session variable does not display new content Only one column of the table responsible for Drag and Drop - Touch Punch

score 0 · Answer 1

First, it does not make sense to put a <li> element inside a <a> element:

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

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

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

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

Set the value of href to href="#!" , as the browser will attempt to redirect the user to the element whose id="!" and, as probably will not exist, will not happen. >

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

Use preventDefault() of event click in your element:

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

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