1
I have a problem, when entering my site my registration button opens automatically, I wanted to take this functionality, but I am not able to and when I click the login button if the registration button is open it is behind. It was supposed that when you click the login button the register button disappears. It follows below my code:
Html:
<!---- Botão do iniciar sessão--->
<button class="login" onclick="document.getElementById('id01').style.display='block'" style="border:2px solid black; width:auto; border-radius:10%;" >
<i class="fa fa-user">Iniciar Sessão</i>
</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="indexlogin.php" method="post" >
<div class="container">
<input id="field"type="text" name="email"style="border:1px solid black; width:auto;" placeholder="Email" required>
<br>
<input id="field" type="password" name="password"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>
<br>
<button id="field" type="submit" name="login" style="border:1px solid black; width:200px;">
Entrar
</button>
</div>
<div style="background-color: #adad85">
<button type="button" onclick="document.getElementById('id01').style.display='none'" action="indexlogin.php" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbutao">
Cancelar
</button>
</div>
</form>
</div>
<!---Fim do botão do iniciar sessão --->
<!--- Botão de registar---->
<button class="registar" onclick="document.getElementById('id2').style.display='block'" style="border:2px solid black; border-radius:10%;" >
<i class="fa fa-user-plus">Registar</i>
</button>
<div id="id2" class="modal1">
<form class="modal-content1 animate" action="indexlogin.php" method="post" >
<div class="container1">
<input id="field" type="name" name="nome"style="border:1px solid black; width:auto;" placeholder="Nome Completo" required>
<input id="field"type="text" name="email_registar"style="border:1px solid black; width:auto;" placeholder="Email" required>
<input id="field" type="password" name="password_registar"style="border:1px solid black; width:auto;" placeholder="Palavra-Passe"required>
<input id="field" type="password" name="password_rep"style="border:1px solid black; width:auto;" placeholder=" Repita a palavra-Passe"required>
<button id="field" type="submit" name="registar" style="border:1px solid black; width:200px;" >
Criar Conta
</button>
</div>
<div style="background-color: #adad85">
<button type="button" onclick="document.getElementById('id2').style.display='none'" style=" border:1px solid black; width:auto; border-radius:10%;" class="cancelarbutao">
Cancelar
</button>
</div>
</form>
</div>
CSS:
.container {
padding: 28px; /* padding neste caso e so altura do sistema de login*/
}
.container1 {
padding: 30px; /* padding neste caso e so altura do sistema de login*/
}
.container:before { /* faz a seta para o sistema de login. Mais apelativo*/
content:'';
position:absolute;
width:30px;
height:28px;
margin-left:-11px;
margin-top:-39px;
background:#fff;
-webkit-transform:rotate(45deg);
}
.container1:before { /* faz a seta para o sistema de registar. Mais apelativo*/
content:'';
position:absolute;
width:30px;
height:28px;
margin-left:-24px;
margin-top:-39px;
background:#fff;
-webkit-transform:rotate(45deg);
}
.palavra-passe { /*PASS!!*/
float: right; /*flutuar*/
padding-top: 16px; /*preencimento em cima*/
}
.modal { /* SISTEMA DE LOGIN*/
display: none; /* faz com que o sistema de login fique escondido */
position: fixed; /* posiciona mais em cima */
z-index: 1; /* fica em cima */
left: 178;
top: 8;
width: 100%; /* comprimento maximo */
height: 100%; /* altura maxima */
padding-top: 13%; /* movimenta o sistema de login para baixo*/
padding-left:52%; /* movimenta o sistema de login para esquerda*/
}
.modal1 { /* SISTEMA DE LOGIN*/
position: fixed; /* posiciona mais em cima */
z-index: 1; /* fica em cima */
left:170px ;
top: 28%;
width: 104%; /* comprimento maximo */
height: 100%; /* altura maxima */
padding-top:17px;
padding-left:51%;
}
.modal-content {
background-color: #fefefe;
margin: -13% auto 100% auto; /* move 5% para cima, 15% para baixo e fica centrado*/
width: 36%; /* comprimento do meu sistema de login */
height:39%;
}
.modal-content1 {
background-color: #fefefe;
margin: -13% auto 100% auto; /* move 5% para cima, 15% para baixo e fica centrado*/
width: 34%; /* comprimento do meu sistema de registar */
height:39%;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)}
}
Okay, brg just one more question How can you help me with the other problem? When I click on my log-in button and then on my log-in button. the log-in button does not disappear and is on top of the log-in button.
– Lucas Sintra