如何使用addEventListener('dblclick')在Web应用/扩展中打开模态框？

一、Web应用端代码完善 #

原代码存在事件监听语法未闭合、通过ondblclick判断事件绑定的逻辑无效（addEventListener添加的事件不会挂载到元素的ondblclick属性上）、缺少打开模态框核心逻辑的问题，以下是修正后的实现：

情况1：使用原生HTML <dialog> 模态框 #

若你的模态框是原生HTML5的<dialog>元素（注意选择器需匹配实际标签/类名，原代码的modal-dialog需对应调整）：

// 获取模态框元素（根据实际结构调整选择器）
const myModal = document.querySelector('dialog'); // 或 .modal-dialog
// 获取body元素
const callMyAi = document.querySelector('body');

// 绑定双击事件
callMyAi.addEventListener('dblclick', (event) => {
  // 打开模态框
  if (myModal) {
    myModal.showModal();
    // 可后续补充关闭逻辑，比如点击模态框外部或关闭按钮时调用 myModal.close()
  } else {
    console.error('未找到模态框元素');
  }
});

情况2：使用自定义CSS模态框 #

如果是通过CSS控制display属性实现的自定义模态框：

const myModal = document.querySelector('.modal-dialog');
const callMyAi = document.querySelector('body');

callMyAi.addEventListener('dblclick', (event) => {
  if (myModal) {
    // 添加显示类（假设CSS中 .show 对应模态框显示状态）
    myModal.classList.add('show');
    // 可选：添加页面锁定类，防止背景滚动
    document.body.classList.add('modal-lock');
  } else {
    console.error('未找到模态框元素');
  }
});

二、Web扩展端实现 #

Web扩展需通过内容脚本将逻辑注入目标网页，以Chrome扩展为例：

1. 在扩展的manifest.json中配置内容脚本：

{
  "manifest_version": 3,
  "name": "双击打开AI模态框",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配所有网站，可按需调整范围
      "js": ["content.js"]
    }
  ]
}

2. 创建content.js文件，写入双击逻辑：

// 等待页面DOM加载完成
document.addEventListener('DOMContentLoaded', () => {
  const myModal = document.querySelector('dialog'); // 对应目标页面的模态框选择器
  const callMyAi = document.querySelector('body');

  callMyAi.addEventListener('dblclick', (event) => {
    if (myModal) {
      myModal.showModal();
    } else {
      console.error('扩展未找到目标模态框元素');
    }
  });
});

若你的扩展是在自身弹窗或后台页面实现双击功能，直接将Web应用端的代码写入对应页面脚本即可，无需配置内容脚本。

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