html弹出登录注册页面
时间: 2023-12-15 18:31:59 浏览: 28
以下是一个简单的HTML弹出登录注册页面的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Popup</title>
<!-- 引入jQuery和layer.js -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/layer/3.1.1/skin/default/layer.css">
<script src="https://cdn.bootcss.com/layer/3.1.1/layer.js"></script>
<style>
/* 隐藏登录注册表单 */
#login-form, #register-form {
display: none;
}
</style>
</head>
<body>
<!-- 登录注册按钮 -->
<button onclick="showLoginForm()">登录</button>
<button onclick="showRegisterForm()">注册</button>
<!-- 登录表单 -->
<div id="login-form">
<h2>登录</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit" onclick="login()">登录</button>
</form>
</div>
<!-- 注册表单 -->
<div id="register-form">
<h2>注册</h2>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br>
<button type="submit" onclick="register()">注册</button>
</form>
</div>
<script>
// 显示登录表单
function showLoginForm() {
layer.open({
type: 1,
title: "登录",
area: ["395px", "300px"],
content: $("#login-form"),
});
}
// 显示注册表单
function showRegisterForm() {
layer.open({
type: 1,
title: "注册",
area: ["395px", "300px"],
content: $("#register-form"),
});
}
// 登录函数
function login() {
var username = $.trim($("#username").val());
var password = $.trim($("#password").val());
if (username == "" || password == "") {
layer.alert("用户名或密码不能为空!", {
title: "提示",
icon: 5,
});
} else {
// TODO: 发送登录请求
}
}
// 注册函数
function register() {
var username = $.trim($("#username").val());
var password = $.trim($("#password").val());
var confirmPassword = $.trim($("#confirm-password").val());
if (username == "" || password == "" || confirmPassword == "") {
layer.alert("用户名或密码不能为空!", {
title: "提示",
icon: 5,
});
} else if (password != confirmPassword) {
layer.alert("两次输入的密码不一致!", {
title: "提示",
icon: 5,
});
} else {
// TODO: 发送注册请求
}
}
</script>
</body>
</html>
```