点击返回按钮关闭Lightbox对话框及URL hash修改方案咨询

一、点击Lightbox项目时更新URL Hash #

给每个Lightbox触发元素（比如缩略图）绑定点击事件，手动修改window.location.hash，用唯一标识区分不同项目：

// 假设触发Lightbox的元素有类名lightbox-item，且带有data-id属性存唯一标识
document.querySelectorAll('.lightbox-item').forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    const itemId = this.dataset.id;
    // 更新URL hash
    window.location.hash = `lightbox-${itemId}`;
    // 调用Lightbox的打开方法
    yourLightboxInstance.open(this);
  });
});

二、监听Hash变化关闭Lightbox #

监听浏览器的hashchange事件，当hash不再是Lightbox相关标识时，关闭Lightbox：

window.addEventListener('hashchange', () => {
  if (!window.location.hash.startsWith('#lightbox-')) {
    // 调用Lightbox的关闭方法
    yourLightboxInstance.close();
  }
});

三、页面加载时处理初始Hash（可选） #

如果用户直接访问带Lightbox hash的URL，自动打开对应的Lightbox：

document.addEventListener('DOMContentLoaded', () => {
  const currentHash = window.location.hash;
  if (currentHash.startsWith('#lightbox-')) {
    const targetId = currentHash.replace('#lightbox-', '');
    const targetItem = document.querySelector(`.lightbox-item[data-id="${targetId}"]`);
    targetItem?.click();
  }
});

关键注意点 #

• 把yourLightboxInstance替换成你实际使用的Lightbox实例（比如Lightbox2的lightbox对象，或者自定义实例）。
• 确保每个触发元素的data-id唯一，避免hash冲突。
• 部分Lightbox插件提供打开/关闭回调，你也可以把hash更新逻辑放到回调里，比如在onOpen回调中设置hash，onClose回调中清空hash。

内容的提问来源于stack exchange，提问作者peyman akhtari