# 模态弹窗

URL: https://caijiao.org/jquery/08-projects/05-modal
Source: docs/jquery/08-projects/05-modal.md
Description: 本文介绍如何使用 jQuery 创建模态弹窗，包括遮罩层、内容展示、关闭按钮等功能，适用于提示信息、表单弹出、确认操作等常见场景。

模态弹窗（Modal）是一种常见的用户交互方式，常用于确认提示、登录注册、表单输入等场景。使用 jQuery 可以快速实现动态显示、关闭、动画过渡等功能。

## 功能需求

- 点击按钮打开弹窗
- 显示遮罩层并禁用页面滚动
- 点击关闭按钮或遮罩区域关闭弹窗
- 可扩展支持嵌套表单、动态内容加载等

## HTML 结构示例

```html
<button id="openModal">打开弹窗</button>

<div class="modal-mask"></div>
<div class="modal-box">
  <div class="modal-header">
    <span class="title">提示</span>
    <span class="close-btn">&times;</span>
  </div>
  <div class="modal-content">
    <p>这是一个 jQuery 实现的模态弹窗。</p>
  </div>
</div>
```

## jQuery 实现逻辑

```js
$(function () {
  $("#openModal").click(function () {
    $(".modal-mask, .modal-box").fadeIn();
    $("body").css("overflow", "hidden");
  });

  $(".close-btn, .modal-mask").click(function () {
    $(".modal-mask, .modal-box").fadeOut();
    $("body").css("overflow", "auto");
  });
});
```

## CSS 样式建议

```css
.modal-mask {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
}
.modal-box {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  background: #fff;
  transform: translate(-50%, -50%);
  z-index: 100;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.modal-header {
  padding: 10px;
  background-color: #007bff;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-content {
  padding: 20px;
  color: #333;
}
.close-btn {
  cursor: pointer;
  font-size: 20px;
}
```

## 完整示例代码

[在线代码演示](/jquery/demos/30.html)