Estaba tratando de alternar un modal para mis pestañas de registro e inicio de sesión en un sitio web en el que estoy trabajando, pero la parte final, al convertirlo de oculto a visible en el sitio web, estaba usando un pequeño javascript para agregar una clase "activa" al formularios haciéndolo para que luego aparezcan y todo eso ... ayuda :)
código:
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: Formulario -
<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>Porción de la barra de navegación:
<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'); }Uno de sus problemas es que no respeta el caso camello de Java Script. Tienes que usarlo como "classList" en lugar de "classlist".
Además, no tiene ningún elemento que tenga ".container-fluid" en su código, por lo que también generará un error. Considere eliminar esa línea y cambie de classlist a classList y pruébelo:
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>