1. 原生 js 写 div 弹框为什么还要顺手统一 Key 通道前端页面里做一个 div 弹框本质就三件事一个默认隐藏的容器、一个触发显示的按钮、一个把display改回none的关闭入口。用原生 js 手写不引框架代码量很小面试和日常小工具页都用得上。但真正写起来坑往往不在弹框本身而在你一边写一边让 AI 辅助编码工具帮你补全、改样式、查报错的时候——每个工具都要单独填一次 Key、单独配一次接口地址改一处忘一处最后自己都分不清哪个工具在用哪个通道。这篇就聚焦这个组合场景用原生 js 实现 div 弹框的显示、遮罩、关闭按钮和 ESC 关闭同时把 AI 辅助编码工具的 Key 通道统一到一份settings.json配置骨架里。适合正在写原生交互组件、又想让多个编码工具共用一套 Key 的前端同学。读完你能拿到两样可复制的东西一份能直接跑的弹框 HTML/JS一份settings.json的配置骨架以及逐项验证它们是否生效的动作。我试过把弹框逻辑和配置验证放在同一个页面里做好处是改完配置刷新页面就能看到效果不用来回切工具。下面按「先写弹框 → 再统一 Key → 再验证」的顺序来。2. 弹框的 DOM 结构与显示隐藏逻辑先把结构定下来。弹框要能盖住页面所以需要一个全屏遮罩层加一个居中的内容层。遮罩层负责拦截点击内容层放标题、正文和关闭按钮。!-- 触发按钮 -- button idopenBtn打开弹框/button !-- 遮罩 弹框 -- div idmask classmask div iddialog classdialog div classdialog-header span提示/span span idcloseBtn classclose-btn×/span /div div classdialog-body这里是弹框内容/div /div /div样式上遮罩默认display: none打开时改成flex居中。这里用 class 切换而不是直接改style.display方便后面加过渡动画。.mask { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); justify-content: center; align-items: center; z-index: 999; } .mask.show { display: flex; } .dialog { width: 400px; background: #fff; border-radius: 8px; overflow: hidden; } .dialog-header { display: flex; justify-content: space-between; padding: 10px 14px; background: #fc0; cursor: move; } .close-btn { cursor: pointer; padding: 0 6px; }JS 部分把打开、关闭、点遮罩关闭、ESC 关闭都接上。注意关闭按钮的点击事件要阻止冒泡否则会同时触发遮罩的关闭逻辑虽然结果一样但逻辑上会重复执行。const mask document.getElementById(mask); const openBtn document.getElementById(openBtn); const closeBtn document.getElementById(closeBtn); function openDialog() { mask.classList.add(show); } function closeDialog() { mask.classList.remove(show); } openBtn.addEventListener(click, openDialog); closeBtn.addEventListener(click, function (e) { e.stopPropagation(); closeDialog(); }); // 点遮罩空白处关闭 mask.addEventListener(click, function (e) { if (e.target mask) closeDialog(); }); // ESC 关闭 document.addEventListener(keydown, function (e) { if (e.key Escape mask.classList.contains(show)) closeDialog(); });到这里弹框的开关就完整了。e.target mask这个判断是关键它保证只有点到遮罩本身才关闭点到弹框内部不会误关。3. TaoToken 前置统一 Key 与 API 通道弹框写完后接下来处理 AI 辅助编码工具的 Key 问题。多个工具各配各的最麻烦的是接口地址和 Key 分散在不同文件里。TaoToken 提供统一的 API 通道把 Key 和地址收敛到一份配置里工具侧只读这份配置。先拿到 Key。打开控制台创建 API Key地址是https://taotoken.net/api-keys创建后复制保存页面只显示一次。模型对话入口在https://taotoken.net/models接入文档在https://taotoken.net/doc需要查参数时看文档。官网入口是https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 基础地址是https://taotoken.net/api注意这个地址不带查询参数。注意Key 属于敏感信息不要提交到公开仓库建议放在本地配置文件或环境变量里.gitignore里加上对应文件名。统一通道的价值在于你写弹框时让工具补全代码、查报错、生成注释用的都是同一个 Key 和同一个地址换工具不用重新配。下面给出settings.json的配置骨架。4. 可复制的 settings.json 配置骨架这份骨架把统一 Key、API 地址、模型名和常用参数放在一起。不同工具读取的字段名可能不同但结构可以照搬按工具文档改字段名即可。{ provider: taotoken, apiKey: sk-你的Key粘贴在这里, baseUrl: https://taotoken.net/api, model: claude-sonnet-4-20250514, maxTokens: 4096, temperature: 0.7, timeout: 60000, tools: { codingPlan: { enabled: true, endpoint: https://taotoken.net/coding-plan }, chat: { enabled: true, endpoint: https://taotoken.net/models } } }逐项说明一下。provider标记通道来源方便多环境切换apiKey填控制台创建的 KeybaseUrl固定为https://taotoken.net/api不要在后面加斜杠或路径model按你实际要用的模型填写代码场景选长上下文模型更稳maxTokens和temperature按任务调补全代码时温度可以调低到 0.2 左右减少发散。如果你的工具支持从环境变量读 Key可以把apiKey改成读取process.env.TAOTOKEN_API_KEY配置文件里只留占位符。长期做编码和 Agent 任务的话Coding Plan 入口在https://taotoken.net/coding-plan适合把多个编码工具的额度统一管理。5. 验证请求与弹框开关是否都生效配置写完不能只看要验证。分两步先验证弹框开关再验证 Key 通道能通。弹框验证很简单打开页面点按钮弹框出现点关闭按钮弹框消失点遮罩空白处弹框消失按 ESC弹框消失。四个动作都过一遍说明显示隐藏逻辑没问题。如果某个动作失效回到第 2 节检查对应的事件绑定。Key 通道验证用一个最小请求。下面这段用fetch发一次对话请求把返回结果打印出来。注意这是验证配置用的实际工具里由工具自己发请求。async function testKey() { const res await fetch(https://taotoken.net/api/v1/messages, { method: POST, headers: { Content-Type: application/json, x-api-key: sk-你的Key, anthropic-version: 2023-06-01 }, body: JSON.stringify({ model: claude-sonnet-4-20250514, max_tokens: 64, messages: [{ role: user, content: 回复 ok 两个字母 }] }) }); const data await res.json(); console.log(data); } testKey();返回里能看到模型输出说明 Key 和地址都对。如果返回 401检查 Key 是否复制完整返回 404检查baseUrl后面有没有多加路径返回超时检查网络和timeout设置。验证通过后把这段测试代码删掉别留在生产页面里。6. 本篇常见错排查弹框点关闭没反应最常见的原因是关闭按钮的事件被遮罩拦截或者e.stopPropagation()写在了错误的位置。检查关闭按钮是否在遮罩内部以及事件绑定顺序。点弹框内部也关闭了说明遮罩的点击判断写成了无条件关闭。确认用的是e.target mask而不是mask.addEventListener(click, closeDialog)直接绑。ESC 关闭失效检查keydown是否绑在document上以及判断条件里有没有加mask.classList.contains(show)否则弹框没开时按 ESC 也会执行关闭逻辑。配置不生效先确认settings.json的路径是工具实际读取的路径有些工具读项目根目录有些读用户目录。再确认 JSON 格式合法多一个逗号都会导致解析失败可以用编辑器的 JSON 校验功能检查。请求返回鉴权错误优先检查 Key 有没有多余空格以及请求头字段名是否和文档一致。不同接口的鉴权头字段可能不同以接入文档https://taotoken.net/doc为准。需要重新生成或管理 Key去https://taotoken.net/api-keys想先试模型效果去https://taotoken.net/models长期编码任务统一额度看https://taotoken.net/coding-plan。把弹框逻辑和 Key 配置放在一起验证改完刷新页面就能同时看到两边结果比分开调试省事。
