WordPress中PrettyPhoto模态框打开时禁用键盘导航的技术问询

这问题我之前做项目时也碰到过，其实不用复杂的钩子，直接利用PrettyPhoto自带的回调函数就能搞定，给你一步步说清楚：

1. 先定义全局状态变量 #

首先声明一个全局布尔变量，用来追踪PrettyPhoto模态框的开闭状态：

// 初始状态为false，代表模态框未打开
let isPrettyPhotoOpen = false;

2. 初始化PrettyPhoto时绑定回调 #

在你初始化PrettyPhoto的代码里，加上它自带的打开/关闭回调，用来更新这个状态变量：

// 假设你是这样初始化PP的，把回调加进去
$("a[rel^='prettyPhoto']").prettyPhoto({
  // 这里放你原本的PP配置，比如theme、social_tools之类的
  callback_on_open: function() {
    // 模态框打开时，把状态设为true
    isPrettyPhotoOpen = true;
  },
  callback_on_close: function() {
    // 模态框关闭时，把状态重置为false
    isPrettyPhotoOpen = false;
  }
});

小提示：如果你的PP版本比较旧，回调名称可能是onOpen和onClose，可以翻一下你手里的PP源码确认下，一般在初始化配置的注释里会写清楚。

3. 在键盘导航代码里添加判断逻辑 #

最后，在你写的文章键盘导航的键盘事件监听代码里，先判断这个状态变量，如果模态框处于打开状态，直接跳过导航逻辑：

document.addEventListener('keydown', function(e) {
  // 核心判断：如果PP模态框开着，就不执行导航
  if (isPrettyPhotoOpen) return;

  // 下面是你原本的键盘导航逻辑，比如左右箭头切换文章
  if (e.key === 'ArrowLeft') {
    // 左箭头跳转上一篇的代码
    console.log('跳转到上一篇');
  } else if (e.key === 'ArrowRight') {
    // 右箭头跳转下一篇的代码
    console.log('跳转到下一篇');
  }
});

这样就能完美实现需求了——当PP模态框打开时，键盘导航的代码会直接跳过，只有模态框关闭后才会正常响应键盘操作。

内容的提问来源于stack exchange，提问作者Chris J. Zähller