Modal

模态框组件为创建对话框、弹出框、灯箱或任何其他内容提供了坚实的基础。

该组件在其子节点之前渲染一个幕布组件。Modal 提供了重要的功能

💄 管理模态框堆叠，当一次一个不够用时。
🔐 创建一个幕布，用于禁用模态框下方的交互。
🔐 它在打开时禁用页面内容的滚动。
♿️ 它正确地管理焦点；移动到模态框内容，并将其保持在那里直到模态框关闭。
♿️ 自动添加适当的 ARIA 角色。

如果您要创建模态对话框，您可能需要使用 Dialog 组件，而不是直接使用 Modal。Modal 是一个较低级别的构造，以下组件利用了它

<Button onClick={handleOpen}>Open modal</Button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  <Box sx={style}>
    <Typography id="modal-modal-title" variant="h6" component="h2">
      Text in a modal
    </Typography>
    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    </Typography>
  </Box>
</Modal>

<Button onClick={handleOpen}>Open modal</Button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  <Box sx={style}>
    <Typography id="modal-modal-title" variant="h6" component="h2">
      Text in a modal
    </Typography>
    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    </Typography>
  </Box>
</Modal>

按 Enter 开始编辑

请注意，您可以使用 outline: 0 CSS 属性禁用轮廓（通常是蓝色或金色）。

模态框可以嵌套，例如对话框中的选择框，但不鼓励堆叠超过两个模态框，或任何两个带有幕布的模态框。

<Button onClick={handleOpen}>Open modal</Button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="parent-modal-title"
  aria-describedby="parent-modal-description"
>
  <Box sx={{ ...style, width: 400 }}>
    <h2 id="parent-modal-title">Text in a modal</h2>
    <p id="parent-modal-description">
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    </p>
    <ChildModal />
  </Box>
</Modal>

<Button onClick={handleOpen}>Open modal</Button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="parent-modal-title"
  aria-describedby="parent-modal-description"
>
  <Box sx={{ ...style, width: 400 }}>
    <h2 id="parent-modal-title">Text in a modal</h2>
    <p id="parent-modal-description">
      Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
    </p>
    <ChildModal />
  </Box>
</Modal>

按 Enter 开始编辑

过渡效果

模态框的打开/关闭状态可以使用过渡组件进行动画处理。此组件应满足以下条件

是模态框的直接子代。
具有 in 属性。这对应于打开/关闭状态。
当进入过渡开始时，调用 onEnter 回调属性。
当退出过渡完成时，调用 onExited 回调属性。这两个回调允许模态框在关闭并完全过渡后卸载子内容。

Modal 内置支持 react-transition-group。

或者，您可以使用 react-spring。

性能

模态框的内容在关闭时会被卸载。如果您需要使内容可供搜索引擎搜索，或者在优化交互响应性的同时在模态框内渲染昂贵的组件树，那么启用 keepMounted 属性可能是更改此默认行为的好主意

<Modal keepMounted />

与任何性能优化一样，这不是万能药。请务必首先识别瓶颈，然后尝试这些优化策略。

React 不支持服务端的 createPortal() API。为了显示模态框，您需要使用 disablePortal 属性禁用 portal 功能

局限性

焦点捕获

如果焦点试图逃脱，模态框会将焦点移回组件的主体。

这样做是为了可访问性目的。但是，它可能会产生问题。如果用户需要与页面的另一部分（例如聊天机器人窗口）进行交互，您可以禁用此行为

<Modal disableEnforceFocus />

可访问性

（WAI-ARIA：https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/）

请务必添加 aria-labelledby="id..."，引用模态框标题，到 Modal。此外，您可以使用 aria-describedby="id..." 属性在 Modal 上提供模态框的描述。
```
<Modal aria-labelledby="modal-title" aria-describedby="modal-description">
  <h2 id="modal-title">My Title</h2>
  <p id="modal-description">My Description</p>
</Modal>
```
WAI-ARIA 创作实践可以帮助您根据模态框内容将初始焦点设置在最相关的元素上。
请记住，“模态窗口”覆盖在主窗口或另一个模态窗口之上。模态窗口下的窗口是惰性的。也就是说，用户无法与活动模态窗口外部的内容进行交互。这可能会产生冲突行为。

无样式

使用 Base UI Modal 完全拥有组件的设计，无需覆盖 Material UI 或 Joy UI 样式。此组件的无样式版本是需要重度自定义和更小捆绑包大小的理想选择。

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。

<Modal />

Modal

服务端模态框