HTML5 实现弹出式登录窗口功能及样式优化

<div id="popup-login">
<form action="/your-authentication-endpoint" method="post">
<input type="email" name="username" placeholder="邮箱/用户名" required>
<input type="password" name="password" placeholder="密码" required>

<!-- 可选：记住我选项 -->
<label class="checkbox-inline"><input type="checkbox"> 记住我</label>

<button type="submit">登 录</button>

<!-- 链接到注册或忘记密码页面 -->
<a href="#">立即注册 / 忘记密码？</a>

</form>

<!-- 弹窗关闭按钮 -->
<span onclick="closePopup()">×</span>
</div>

/* 将登录框隐藏 */
#popup-login {
display:none;
position: fixed; /* 使用固定定位使其相对于视口居中显示*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:white;
padding:2rem;
border-radius:10px;
box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 16px;
}

/* 登录按钮及其他样式美化 */
#popup-login button,
.checkbox-inline input[type=checkbox]{
margin-top:.5em;
}
...

/* 添加过渡动画（如淡入淡出） */
#popup-login.show {
animation-name: fadeInUp;
animation-duration: .5s;
}

@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20%); }
to {opacity: 1;transform:translateY(0);}
}

function showLogin() {
document.getElementById('popup-login').classList.add("show");
}

// 假设“login-btn”为打开登陆窗口的按钮ID
document.querySelector('#login-btn').addEventListener('click', function(){
showLogin();
});

function closePopup() {
var popup = document.getElementById('popup-login');
if (popup.classList.contains('show')) {
popup.classList.remove('show'); // 关闭弹出层
} else {
return false;
}
}

// 在提交事件上处理逻辑并在成功认证后调用closePopup()
document.querySelector("#popup-login form").addEventListener("submit", function(event){
event.preventDefault(); //阻止默认行为

// 这里应包含你的身份验证代码

if(/* 成功验证 */) {
closePopup(); // 如果用户已正确登录，则关闭登录窗口。
}

});