为W3 Lightbox Modal添加键盘按键控制功能求助

嘿，这个需求很好实现！我帮你整理了具体的代码和步骤，直接套用就行～

核心思路 #

我们只需要给全局添加一个键盘按键监听事件，判断用户按下的是ESC、左箭头还是右箭头，然后调用W3 Lightbox自带的关闭/切换图片函数就可以了。

具体代码实现 #

把这段代码放在你的Lightbox JS代码之后（或者放在DOM加载完成的回调里，确保元素都能被找到）：

document.addEventListener('keydown', function(e) {
  // 先检查Lightbox是否处于显示状态，避免没打开时误触发
  const lightbox = document.getElementById('myLightbox');
  if (!lightbox || lightbox.style.display !== 'block') return;

  // 用现代的key值判断，可读性更强
  switch(e.key) {
    case 'Escape': // ESC键关闭弹窗
      closeModal(); // 这里是W3 Lightbox默认的关闭函数名，要是你改了名字记得替换
      break;
    case 'ArrowLeft': // 左箭头切上一张
      plusSlides(-1); // W3默认的切换函数，-1对应上一张
      break;
    case 'ArrowRight': // 右箭头切下一张
      plusSlides(1); // 1对应下一张
      break;
  }

  // 如果你需要兼容非常旧的浏览器，可以用下面的keyCode写法（替换上面的switch）
  // switch(e.keyCode) {
  //   case 27: closeModal(); break; // ESC键的keyCode是27
  //   case 37: plusSlides(-1); break; // 左箭头是37
  //   case 39: plusSlides(1); break; // 右箭头是39
  // }
});

几个注意点 #

• 替换myLightbox：如果你的Lightbox弹窗ID不是这个，记得改成你自己设置的ID。
• 函数名对应：如果你修改了W3默认的closeModal或plusSlides函数名，要把代码里的函数名也换成你自己的。
• DOM加载顺序：如果担心元素还没加载就执行代码，可以把整个监听代码放在DOM加载完成的回调里：

  document.addEventListener('DOMContentLoaded', function() {
    // 上面的键盘监听代码放在这里
  });
  

• 自定义显示逻辑：如果你的Lightbox是用class来控制显示/隐藏的（比如添加active类），那判断显示状态的代码要改成lightbox.classList.contains('active')。

这样设置好之后，打开Lightbox就能用ESC关闭，左右箭头切换图片啦！

内容的提问来源于stack exchange，提问作者Brandon AV