COMPONENT 58 · Overlays & Disclosure

灯箱

Lightbox

也叫Image ViewerMedia Viewer图片灯箱Quick Look

在遮罩层上放大媒体，并可浏览相邻媒体。

Enlarges media over a dimmed backdrop and may navigate between adjacent items.

ANATOMY & USAGE

结构与使用建议

组成部分

遮罩
放大媒体
关闭与前后导航

适合使用

缩略图需要不离开页面即可查看大图时。

不建议使用

媒体需要复杂编辑、下载信息或独立可分享页面时。

键盘与无障碍

实现对话框焦点规则；图片有替代文本，前后与关闭按钮有名称，支持 Escape。

DESCRIBE IT TO AI

这样告诉编程助手

实现灯箱（Lightbox）：在遮罩层上放大媒体，并可浏览相邻媒体。

MINIMAL RUNNABLE CODE

可复制代码

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

READ ONLY · SAFE TO COPY

<div class="demo">
  <button id="open-photo" type="button" aria-label="放大查看海边照片">查看照片</button>
  <dialog class="lightbox" aria-label="照片预览">
    <button id="previous-photo" type="button" aria-label="上一张照片">‹</button>
    <figure>
      <div class="photo" role="img" aria-label="蓝色海面">
      </div>
      <figcaption aria-live="polite">海边 · 1 / 3</figcaption>
    </figure>
    <button id="next-photo" type="button" aria-label="下一张照片">›</button>
    <button id="close-photo" type="button">关闭</button>
  </dialog>
</div>