以下是一个简单的含有注册登录
切换tab的弹窗
前端代码：
HTML部分：
```
<div class="modal">
<div class="modal-content">
<ul class="
tab-group">
<li class="
tab active"><a href="#login">登录</a></li>
<li class="
tab"><a href="#signup">注册</a></li>
</ul>
<div class="
tab-content">
<div id="login">
<h1>欢迎回来！</h1>
<form>
<div class="field-wrap">
<label>
邮箱<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
密码<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<p class="forgot">
忘记密码了？<a href="#">重置密码</a>
</p>
<button class="button button-block">登录</button>
</form>
</div>
<div id="signup">
<h1>欢迎加入我们！</h1>
<form>
<div class="top-row">
<div class="field-wrap">
<label>
姓名<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
邮箱<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>
密码<span class="req">*</span>
</label>
<input type="password" required autocomplete="off" />
</div>
<button type="submit" class="button button-block">注册</button>
</form>
</div>
</div>
</div>
</div>
```
CSS部分：
```
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 40%;
max-width: 600px;
padding: 30px 50px;
}
.
tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.
tab-group:after {
content: "";
display:
table;
clear: both;
}
.
tab {
float: left;
}
.
tab a {
display: block;
text-decoration: none;
padding: 15px;
background-color: #eee;
color: #888;
margin-right: 1px;
font-size: 20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.
tab.active a {
background-color: #fff;
color: #000;
}
.
tab-content {
display: none;
padding: 15px;
border-radius: 0 5px 5px 5px;
border: 1px solid #888;
overflow: hidden;
}
.
tab-content.active {
display: block;
}
.field-wrap {
position: relative;
margin-bottom: 25px;
}
label {
font-size: 18px;
font-weight: 400;
display: block;
margin-bottom: 5px;
}
input {
font-size: 18px;
display: block;
width: 100%;
height: 100%;
padding: 10px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #545f58;
border-radius: 0;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
input:focus {
outline: 0;
border-color: #33c3f0;
box-shadow: 0 0 5px rgba(51, 204, 240, 0.5);
}
.forgot {
color: #888;
font-size: 13px;
text-align: center;
margin-top: 15px;
}
.button {
border: 0;
outline: none;
border-radius: 5px;
padding: 15px 0;
font-size: 2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
background-color: #33c3f0;
color: #fff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover,
.button:focus {
background-color: #1cb3e8;
}
.button-block {
display: block;
width: 100%;
}
.top-row:after {
content: "";
display:
table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin-right: 0;
}
```
JavaScript部分：
```
document.addEventListener("DOMContentLoaded", function () {
var
tabs = document.querySelectorAll(".
tab");
var contents = document.querySelectorAll(".
tab-content");
for (var i = 0; i <
tabs.length; i++) {
tabs[i].addEventListener("click", function () {
var active
Tab = document.querySelector(".
tab.active");
var activeContent = document.querySelector(".
tab-content.active");
var current
Tab = this;
var currentContent = document.querySelector(
current
Tab.querySelector("a").getAttribute("href")
);
active
Tab.classList.remove("active");
current
Tab.classList.add("active");
activeContent.classList.remove("active");
currentContent.classList.add("active");
});
}
});
```
以上代码会在
页面加载完毕后
自动执行，监听
tab的点击事件，实现注册登录
切换的功能。当用户点击注册或登录按钮时，会弹出一个模态框，其中包含两个
tab，分别对应注册和登录功能。用户可以在模态框中输入相关信息进行注册或登录操作。
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
