I was trying to toggle a modal for my register and login tabs on a website I’m working on, but the final part turning it from hidden to visible on the website I was using a little javascript to add an “active” class to the forms making it so they then appear and whatnot… help 馃檪
code:
CSS:
.login-form{
color: white;
text-align: center;
position: absolute;
top: 20%;
left: 37.5%;
transform: transform(-50%,-50%);
background: black;
border-radius: 15px;
box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 2);
visibility: hidden;
transform: .2s;
}
.login-form.active{
top: 50%;
transition: .2s;
visibility: visible;
}
.container-fluid.active{
filter: blur(20px);
transition: .2s;
pointer-events: none;
}
HTML:
Form –
<div class="login-form">
<div class="form">
<div class="closeBTN" onclick="loginToggle()">×</div>
<div class="title">
<h1>Login</h1>
</div>
<form action="loginConfig.php">
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<input type="submit" value="Login">
</form>
</div>
</div>
Navbar portion:
<div class="login">
<ul>
<li onclick="registerToggle()">Registar-se</li>
<li onclick="loginToggle()">Login</li>
</ul>
</div>
JS:
function loginToggle() {
var container = document.querySelector('.container-fluid');
container.classlist.add('active');
var popup = document.querySelector('.login-form');
popup.classlist.add('active');
}
