在执行标题位置后更改div的显示样式

Question

所以基本上我有一个注册和登录表单是弹出和激活一个按钮弹出。下列代码

登录

<!-- 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

.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;
}

登录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');
});

点击<button id="btnLogin" name="login">LogIn</button>后，它将执行一个php代码来检查用户输入是否正确

登录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();
}

这就是我的问题开始。在执行php代码之后，它执行header并指向我定义的页面。但是弹出式登录在加载页面后消失，在发布用户错误时使其变得丑陋。我想知道是否有更好的执行，弹出登录不会在加载header功能后消失。

Answer 1

我所做的是在我的error。php中它用于处理不同的queryStrings代码.

<?php 
if (isset($_GET["error"])) {
if ($_GET["error"] == "emptyinput") {
echo "<p class='error'>Fill in all fields</p>";
}

我添加了一个脚本标签，它将处理不同的命令，以保持flex在刷新页面后弹出模式的显示样式。下面的最终代码

<?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>";

感谢@dov-rine和@waseel-ahmad-mufti的想法。