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');
}
One of your problem is that you don't respect the camel case of Java Script. You have to use it as "classList" instead of "classlist".
Also you don't have any element having ".container-fluid" in your code so that will trigger an error as well. Consider removing that line and change from classlist to classList and give it a try:
function loginToggle() {
//var container = document.querySelector('.container-fluid');
//container.classList.add('active');
var popup = document.querySelector('.login-form');
popup.classList.add('active');
}.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);
display:none;
transform: .2s;
}
.login-form.active{
top: 50%;
transition: .2s;
visibility: visible;
}
.container-fluid.active{
filter: blur(20px);
transition: .2s;
pointer-events: none;
}
.active{
display:block;
}<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>
<div class="login">
<ul>
<li onclick="registerToggle()">Registar-se</li>
<li onclick="loginToggle()">Login</li>
</ul>
</div>