Básicamente, tengo un formulario de registro e inicio de sesión que es emergente y se puede activar mediante un botón emergente. Código a continuación
Acceso
<!-- Popup LogIn --> <div class="bg-modal"> <div class="modal-content"> <div class="close">+</div> <img src="images/udm_logo.png" height="95px"> <form action="includes/login.php" method="post"> <p class="tag-name">Email</p> <input type="email" class="login" name="email"> <p class="tag-name">Password</p> <input type="password" class="login" name="password"> <button id="btnLogin" name="login">LogIn</button> </form> <button id="btnSignup">SignUp</button> <?php include 'js/errors.php'; ?> </div> </div>CSS de inicio de sesión
.bg-modal { width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: absolute; top: 0; display: flex; justify-content: center; align-items: center; display: none; }Iniciar sesión Javascript
const bgmodal = document.querySelector('.bg-modal'); const modalBtn = document.getElementById('login'); modalBtn.addEventListener('click', function() { bgmodal.style.display = 'flex'; body.classList.toggle('overflow-hidden'); }); Después de hacer clic <button id="btnLogin" name="login">LogIn</button> , se ejecutará un código php que verificará si la entrada del usuario es correcta o no.
Iniciar sesión PHP
<?php if (isset($_POST["login"])) { $email = $_POST["email"]; $pwd = $_POST["password"]; require_once 'connection.php'; require_once 'function.php'; if (emptyInputLogin($email, $pwd) !== false) { header("location: ../index.php?error=emptyinput"); exit(); } loginUser($connection, $email, $pwd); }else { header("location: ../index.phpentered"); exit(); } Aquí es donde comienza mi problema. Después de ejecutar el código php, ejecuta el header y dirige a la página que definí. Pero el inicio de sesión emergente desaparece después de cargar la página, lo que la hace fea al publicar el error del usuario. Me gustaría saber si hay una mejor ejecución que el inicio de sesión emergente no desaparezca después de cargar la función de header .
Entonces, lo que hice fue en mi error.php, que se usa para manejar los diferentes códigos queryStrings a continuación .
<?php if (isset($_GET["error"])) { if ($_GET["error"] == "emptyinput") { echo "<p class='error'>Fill in all fields</p>"; } Agregué una etiqueta de secuencia de comandos que manejará los diferentes comandos para mantener flex el estilo de visualización del modal emergente después de actualizar la página. Código final a continuación
<?php if (isset($_GET["error"])) { if ($_GET["error"] == "emptyinput") { echo "<script> const bgmodalphp = document.querySelector('.bg-modal'); const modalcont_signup_php = document.querySelector('.modal-content-signup'); if (bgmodalphp){ bgmodalphp.style.display = 'flex'; body.classList.toggle('overflow-hidden'); };"; echo '</script>'; echo "<p class='error'>Fill in all fields</p>"; Gracias a @dov-rine y @waseel-ahmad-mufti por la idea.