话不多说,直接让我们来上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
:root {
--modal-duration: 2s;
--primary-color: #30336b;
--secondary-color: #be2edd;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
transition: transform 0.5s ease;
}
body.show-nav {
transform: translateX(200px);
}
nav {
background-color: var(--primary-color);
color: #fff;
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 100vh;
z-index: 100;
transform: translateX(-100%);
}
nav .logo {
padding: 30px 0;
text-align: center;
}
nav .logo img {
width: 75px;
height: 75px;
}
nav ul {
list-style: none;
}
nav ul li {
border-bottom: 2px solid rgba(200, 200, 200, 0.1);
padding: 20px;
}
nav ul li:first-of-type {
border-top: 2px solid rgba(200, 200, 200, 0.1);
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
header {
background-color: var(--primary-color);
color: #fff;
text-align: center;
padding: 40px 15px;
position: relative;
font-size: 130%;
}
header p {
margin: 30px 0;
}
button,
input[type="submit"] {
background-color: var(--secondary-color);
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 12px;
border: 0;
}
button:focus {
outline: none;
}
.toggle {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 20px;
left: 20px;
}
.cta-btn {
padding: 12px 30px;
font-size: 20px;
}
.container {
padding: 15px;
margin: 0px auto;
max-width: 100%;
width: 800px;
}
.modal-container {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0px;
bottom: 0;
left: 0;
right: 0;
display: none;
}
.modal-container.show-modal {
display: block;
}
.modal {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
width: 400px;
animation-name: modalopen;
animation-duration: var(--modal-duration);
}
.modal-header {
background-color: var(--primary-color);
color: #fff;
padding: 15px;
}
.close-btn {
background-color: transparent;
position: absolute;
top: 0;
right: 0;
font-size: 25px;
}
.modal-content {
padding: 20px;
}
.modal-form div {
margin: 15px 0;
}
.modal-form label {
display: block;
margin-bottom: 5px;
}
.modal-form .form-input {
padding: 8px;
width: 100%;
}
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<nav>
<div class="logo">
<img src="./image/1.jpg" alt="logo">
</div>
<ul>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
<li><a href="#">cyg</a></li>
</ul>
</nav>
<header>
<button class="toggle" id="toggle">
<i class="fa fa-bars fa-2x"></i>
</button>
<button class="cta-btn" id="open">登录</button>
</header>
<!-- 这里你可以再添加一些其他的内容充裕好看 -->
<!--模态框-->
<div class="modal-container" id="modal">
<div class="modal">
<button class="close-btn" id="close">
<i class="fa fa-times"></i>
</button>
<div class="modal-header">
<h3>登录</h3>
</div>
<div class="modal-content">
<p>登录了解更多课程及促销活动</p>
<form class="modal-form">
<div>
<label for="name"></label>
<input type="text" name="" id="name" placeholder="请输入姓名" class="form-input">
</div>
<div>
<label for="email">邮箱</label>
<input type="email" id="email" placeholder="请输入邮箱" class="form-input" />
</div>
<div>
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码" class="form-input" />
</div>
<div>
<label for="password2">确认密码</label>
<input type="password" id="password2" placeholder="请再次输入密码" class="form-input" />
</div>
<input type="submit" value="提交" class="submit-btn" />
</form>
</div>
</div>
</div>
<script type="text/javascript">
// 获取节点
const toggle = document.getElementById("toggle");
const close = document.getElementById("close");
const open = document.getElementById("open");
const modal = document.getElementById("modal");
window.addEventListener("click", e => {
e.target == modal ? modal.classList.remove("show-modal") : false;
/*点击的是不是modaldiv,如果是就模态框消失,否则上面都不做。*/
});
toggle.addEventListener("click", () => {
document.body.classList.toggle("show-nav");
//如果按下了按钮就显示nav否则切换不见nav
});
open.addEventListener("click", () => {
modal.classList.add("show-modal");
//如果点击的是登录按钮就显示模态框
});
close.addEventListener("click", () => {
modal.classList.remove("show-modal");
//如果点击的是模态框上面的x的话,也消失掉.
});
</script>
</body>
</html>