COMPONENT 50 · Overlays & Disclosure

对话框

Dialog

也叫ModalModal Dialog模态框NSPanel

在当前页面上方打开一个需要集中处理的独立任务容器。

Opens a focused task container above the current page.

ANATOMY & USAGE

结构与使用建议

组成部分

遮罩
对话框容器
标题内容与操作

适合使用

短任务需要保持原页面上下文并集中注意力时。

不建议使用

内容复杂、需要分享 URL 或长时间工作时。

键盘与无障碍

提供名称，打开时移动焦点并限制在内部；Escape 关闭后焦点回到触发器。

DESCRIBE IT TO AI

这样告诉编程助手

实现对话框（Dialog）：在当前页面上方打开一个需要集中处理的独立任务容器。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo">
  <button id="open" type="button">打开对话框</button>
  <dialog aria-labelledby="title">
    <h2 id="title">对话框</h2>
    <p>在当前页面上方打开一个需要集中处理的独立任务容器。</p>
    <button id="close">关闭</button>
  </dialog>
</div>