心火 DAILY

第 06 版·代码

一个小而够用的灯箱

灯箱不需要插件。一个 <dialog>,一组按钮,几十行事件就够了。

打开

js
function openLightbox(src, group) {
  dialog.querySelector('img').src = src;
  dialog.showModal();
}

左右切换

把所有图片放进同一个数组,记录当前下标,按左右键时取模:

js
const next = () => show((index + 1) % items.length);
const prev = () => show((index - 1 + items.length) % items.length);

别忘了

  • Esc 关闭
  • 点击遮罩关闭
  • 打开时锁住页面滚动
  • 手机上支持左右滑动

小功能,但用起来顺不顺手,差别很大。

本版编辑 / 醍醐之 · 第 06 版 · 2026-10-01

按 Esc 关闭 · 支持标题、正文、标签