js实现简单模态框实例

这里是基于 Markdown 编写的攻略，以下将详细讲述如何使用 JavaScript 实现简单模态框。

简述

模态框（Modal）是一种弹出框的交互方式，即在页面的中心或者某个指定区域以弹窗的形式展示内容，遮罩层和窗口通常会阻止用户进行其他操作，只有完成当前操作或者关闭模态框后才能继续页面内的其他操作。

使用步骤

参考以下的实现步骤：

1.创建基本结构

我们首先先创建模态框的基本结构，如下所示：

<div class="modal-wrapper" id="modal-wrapper">
  <div class="modal">
    <!-- 模态框内容区域-->
  </div>
</div>

2. 添加样式

为了让模态框在页面中正确展示，我们还需要添加一些样式代码：

.modal-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal {
    width: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 20px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 20px;
}

上述的样式代码，定义了模态框的容器和内容区域的样式。

3.编写 JavaScript 代码

接下来，我们需要编写 JavaScript 代码来实现打开和关闭模态框。

const modalWrapper = document.getElementById("modal-wrapper"); // 获取模态框的父容器
const modal = document.querySelector(".modal"); // 获取模态框本身
const openButton = document.getElementById("open-modal"); // 获取打开模态框的按钮
const closeButton = document.querySelector(".close-button"); // 获取关闭模态框的按钮

// 点击打开模态框的按钮
openButton.addEventListener("click", () => {
  modalWrapper.style.display = "flex";
});

// 点击关闭模态框的按钮
closeButton.addEventListener("click", () => {
  modalWrapper.style.display = "none";
});

// 点击模态框的外部遮罩层或者按下"Esc"键
window.addEventListener("click", (event) => {
  if (event.target === modalWrapper || event.keyCode === 27) {
    modalWrapper.style.display = "none";
  }
});

上述代码分别获取了模态框的父容器、模态框本身、打开和关闭按钮，并为这些元素添加了点击事件。当用户点击打开按钮时，模态框将会以 flex 布局方式“展开”并显示在页面上，同时将背景设置为半透明；当用户单击关闭按钮或者单击模态框背景的其他区域时，模态框将会以隐藏的状态关闭。

示例说明

下面是两个基于上述代码实现的模态框实例：

示例一：基础样式

Codepen 示例

这是一个基础的模态框实例，点击“打开模态框”按钮即可打开模态框。在模态框中，用户可以输入姓名和邮箱，并且点击“确认”按钮后弹出消息框。当用户完成操作或者单击关闭按钮时，模态框将关闭。

示例二：带有复杂表单

CodePen 示例

这是一个带有复杂表单的模态框实例，用户可以填写姓名、邮箱和密码，并且可以选择用户角色和感兴趣的领域。当用户发送表单时，模态框将关闭。