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

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pc端布局</title>
    <style>
        *{ margin: 0; padding: 0; box-sizing: border-box;}
        body{ display: flex; min-width: 40em; flex-flow: column wrap;}
        header{ height: 60px;  display: flex; background:#007ACC; color: #fff;align-items: center; justify-content: space-between; padding: 0 2em;}
        .login{ border-radius: 0.6em; height: 2.6em; width: 5em;}
        .model .model-back{ background: rgba(0,0, 0, 0.6); position:fixed; top: 0;bottom: 0; left: 0; right: 0;}
        .model .model-form{ min-width: 16em; padding: 2em; border: 1px solid #333; position:absolute; top: 5em; left: 30%; right: 30%;
            background: linear-gradient(to top,#5050C4,#7BDCF0); }
        .model .model-form form{ display: grid; grid-template-columns: 3em 1fr; padding: 1em; gap: 1em;}
        .model .model-form .close{ position:absolute; right: 2em; min-width: 3em; text-align: center; border-radius: 0.6em;}
        .model-form{ position: relative;}
        .model .model-form button{ height: 2.5em; grid-area: span 1/span 2;}
        .model{ display: none;}
    </style>
</head>
<body>
    <header>
        <h2>企业官网</h2>
        <button class="login">登录</button>
    </header>
    <div class="model">
        <div class="model-back"></div>
        <div class="model-form">
            <button class="close">关闭</button>
            <h3>用户登录</h3>
            <form action="" method="POST">
                <label for="user">账号:</label>
                <input type="text" name="user" id="user">
                <label for="email">邮箱:</label>
                <input type="email" name="email" id="email">
                <label for="password">密码:</label>
                <input type="password" name="password" id="password">
                <label for="password2">确认:</label>
                <input type="password" name="password2" id="password2">
                <button>登录</button>
            </form>
        </div>
    </div>
    <script>
        // 登录按钮
        const btn = document.querySelector("header button");
        // 模态框
        const modal = document.querySelector(".model");
        // 关闭模态框的按钮
        const close = document.querySelector(".close");
        // 显示模态框
        btn.addEventListener("click", setModal, false);
        // 关闭模态框
        close.addEventListener("click", setModal, false);
        // 显示与关闭模态时调用的回调函数
        function setModal(ev) {
          ev.preventDefault();
          let status = window.getComputedStyle(modal, null).getPropertyValue("display");
          if (status === "none") {
            modal.style.display = "block";
          } else {
            modal.style.display = "none";
          }
        }
      </script>
</html>

效果图展示

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

position：relative；相对定位，相对于自身在文档流中的位置进行定位；
position：absolute；绝对定位，相对于最近已定位的父元素进行定位；
position：fixed；固定定位，相对于浏览器窗口进行定位；

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

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

相关文章