话不多说，直接让我们来上代码：
<!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>