简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 用户注册页面的模态框案例的实现
Blogger Information
Blog 18
fans 1
comment 0
visits 17189
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
用户注册页面的模态框案例的实现
α清尘
Original
901 people have browsed it

用户注册页面的模态框案例的实现

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>pc端布局</title>
  7.     <style>
  8.         *{ margin: 0; padding: 0; box-sizing: border-box;}
  9.         body{ display: flex; min-width: 40em; flex-flow: column wrap;}
  10.         header{ height: 60px;  display: flex; background:#007ACC; color: #fff;align-items: center; justify-content: space-between; padding: 0 2em;}
  11.         .login{ border-radius: 0.6em; height: 2.6em; width: 5em;}
  12.         .model .model-back{ background: rgba(0,0, 0, 0.6); position:fixed; top: 0;bottom: 0; left: 0; right: 0;}
  13.         .model .model-form{ min-width: 16em; padding: 2em; border: 1px solid #333; position:absolute; top: 5em; left: 30%; right: 30%;
  14.             background: linear-gradient(to top,#5050C4,#7BDCF0); }
  15.         .model .model-form form{ display: grid; grid-template-columns: 3em 1fr; padding: 1em; gap: 1em;}
  16.         .model .model-form .close{ position:absolute; right: 2em; min-width: 3em; text-align: center; border-radius: 0.6em;}
  17.         .model-form{ position: relative;}
  18.         .model .model-form button{ height: 2.5em; grid-area: span 1/span 2;}
  19.         .model{ display: none;}
  20.     </style>
  21. </head>
  22. <body>
  23.     <header>
  24.         <h2>企业官网</h2>
  25.         <button class="login">登录</button>
  26.     </header>
  29.     <div class="model">
  30.         <div class="model-back"></div>
  31.         <div class="model-form">
  32.             <button class="close">关闭</button>
  33.             <h3>用户登录</h3>
  34.             <form action="" method="POST">
  35.                 <label for="user">账号:</label>
  36.                 <input type="text" name="user" id="user">
  37.                 <label for="email">邮箱:</label>
  38.                 <input type="email" name="email" id="email">
  39.                 <label for="password">密码:</label>
  40.                 <input type="password" name="password" id="password">
  41.                 <label for="password2">确认:</label>
  42.                 <input type="password" name="password2" id="password2">
  43.                 <button>登录</button>
  44.             </form>
  45.         </div>
  47.     </div>
  48.     <script>
  49.         // 登录按钮
  50.         const btn = document.querySelector("header button");
  51.         // 模态框
  52.         const modal = document.querySelector(".model");
  53.         // 关闭模态框的按钮
  54.         const close = document.querySelector(".close");
  56.         // 显示模态框
  57.         btn.addEventListener("click", setModal, false);
  58.         // 关闭模态框
  59.         close.addEventListener("click", setModal, false);
  61.         // 显示与关闭模态时调用的回调函数
  62.         function setModal(ev) {
  63.           ev.preventDefault();
  64.           let status = window.getComputedStyle(modal, null).getPropertyValue("display");
  65.           if (status === "none") {
  66.             modal.style.display = "block";
  67.           } else {
  68.             modal.style.display = "none";
  69.           }
  70.         }
  71.       </script>
  72. </html>

效果图展示

主要考察对定位与grid布局的应用，利用固定定位写出蒙版，利用grid布局写出表单；

  • position：relative；相对定位，相对于自身在文档流中的位置进行定位；
  • position：absolute；绝对定位，相对于最近已定位的父元素进行定位；
  • position：fixed；固定定位，相对于浏览器窗口进行定位；
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！