模态框

一个网页的模态框由什么组成:

  1. 蒙版
  2. 内容主体(如注册界面/登录界面)
  3. 关闭按钮

蒙版效果展示:

代码实现:采用grid布局。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模态框的改写</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #fcffbc;
      }
      h2 {
        color: #cc51ff;
        text-align: center;
      }
      header {
        background-color: lightskyblue;
        height: 4em;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 2em;
        position: relative;
      }
      /* 首页立即注册按钮样式 */
      header button {
        margin-left: auto;
        position: absolute;
        right: 0.8em;
        background-color: wheat;
        border-radius: 0.6em;
        width: 5em;
        outline: none;
      }
      /* 模态框蒙版 */
      .modal-backdrop {
        /* rgb(red,green,blue,透明度) */
        background-color: rgb(0, 0, 0, 0.6);
        /* 将整个页面盖住,所以采用固定定位 */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      /* 表单主体样式 */
      .modal-body {
        background-color: lightblue;
        padding: 2em;
        min-width: 30em;
        /* 定位在视口的区域中 */
        position: absolute;
        top: 30%;
        left: 35%;
        right: 35%;
      }
      .modal-body form {
        /* 转为grid网格布局 */
        display: grid;
        /* 左侧是账号/密码等,右侧是输入框,但右侧需要自适应,所以采用两列,最后一列为1fr */
        grid-template-columns: 5em 1fr;
        gap: 1em;
        /* 项目在容器之中的对齐方式为居中 */
        place-content: center;
      }
      .modal form button {
        /* 按钮跨越两行 跨越三列显示 */
        grid-area: span 1 / span 2;
        height: 2.5em;
        border-radius: 0.5em;
        outline: none;
        background-color: #ccc;
      }
      /* 表单内输入框样式 */
      .modal form input {
        border: none;
        border-radius: 0.4em;
      }
      /* 表单注册标题居中样式 */
      .modal-body h3 {
        text-align: center;
        position: relative;
        margin-bottom: 2em;
      }
      /* 关闭模态框按钮样式 */
      .modal-body .close {
        position: absolute;
        top: 1em;
        right: 2em;
        border-radius: 0.3em;
        width: 3em;
        background-color: wheat;
        text-align: center;
        border: 1px solid lightcoral;
      }
      /* 当页面初始化时, 模态框,应该是不显示的 */
      .modal {
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <h2>模态框注册案例</h2>
      <button>立即注册</button>
    </header>
    <div class="modal">
      <!-- 创建一个模态框蒙版,用于盖住注册框后面的页面。 -->
      <div class="modal-backdrop">
        <!-- 注册模态框主体部分 -->
        <div class="modal-body">
          <!-- 模态框标题 -->
          <h3>用户注册</h3>
          <button class="close">关闭</button>
          <!-- 简单的注册表单 -->
          <form action="check.php" method="POST">
            <label for="email">邮箱:</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="admin@123.com"
              required
              autofocus
            />
            <label for="password1">密码:</label>
            <input
              type="password"
              name="password1"
              id="password1"
              required
              placeholder="**********"
            />
            <label for="password2">确认密码:</label>
            <input
              type="password"
              name="password2"
              id="password2"
              required
              placeholder="**********"
            />
            <button class="button">立即注册</button>
          </form>
        </div>
      </div>
    </div>
    <script>
      // 登录按钮
      const btn = document.querySelector("header button");
      // 模态框
      const modal = document.querySelector(".modal");
      // 关闭模态框的按钮
      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>
  </body>
</html>

效果展示:

最后修改:2020 年 11 月 03 日 10 : 38 PM
如果觉得我的文章对你有用,请随意赞赏