应使用DOM自建气泡而非原生alert，将其挂载到document.body下并用z-index确保层级，通过JS控制显隐、防重复触发及移动端兼容性。
点击按钮后不弹原生 alert，而是显示自定义气泡
浏览器原生的 alert() 无法样式化、阻塞主线程、体验差。真要“通知气泡”，得用 DOM 自建元素 + CSS 动画 + JS 控制显隐。核心是：按钮只负责触发，气泡本身是独立 <div>，靠 position: absolute 或 position: fixed 浮在页面上。
气泡 DOM 结构和基础样式怎么写才不遮不住内容
常见错误是把气泡插在按钮内部或父容器里，导致被 overflow hidden 截断。正确做法是将气泡节点挂到 document.body 下，并用 z-index 确保层级足够高：
<div id="notify-bubble" class="bubble" style="display: none; position: fixed; top: 20px; right: 20px; z-index: 9999;"> <span class="bubble-text">操作成功！</span> </div>
- 不要用
position: absolute配相对定位父容器——父容器一旦滚动或缩放，气泡就错位 -
top/right值建议用 px 或 rem，避免用 % 导致响应式错乱 - 必须设
display: none初始态，JS 控制style.display = 'block'，别用visibility: hidden（仍占布局空间）
用 JavaScript 控制气泡的显示、自动隐藏和防重复触发
按钮点击后如果快速连点多次，可能生成多个气泡或动画冲突。关键逻辑是：一次只允许一个气泡存在，且自动消失后才能再次触发。
- 用一个全局变量（如
let currentBubbleTimer = null）记录当前定时器 ID - 每次触发前先
clearTimeout(currentBubbleTimer)，避免旧气泡还没消失就被新气泡覆盖 - 显示后立即设置
setTimeout(() => { bubble.style.display = 'none'; }, 3000) - 气泡 DOM 节点复用，不要每次
document.createElement—— 初始化时只创建一次，后续只改textContent和显隐
移动端点击没反应？检查 pointer-events 和 touch 兼容性
有些设备上按钮点击无响应，大概率是气泡或遮罩层误挡了事件流。尤其当用了伪元素、透明背景或未设 pointer-events 时：
立即学习“前端免费学习笔记（深入）”；
- 确保气泡自身没有
pointer-events: none（否则点击穿透到下层，但你本意是让它可交互） - 如果气泡带关闭按钮，关闭按钮的
click事件监听必须用addEventListener，不能只靠内联onclick - 在 iOS Safari 上，部分老版本对
transform动画中的元素有点击延迟，建议加cursor: pointer和-webkit-tap-highlight-color: transparent
最易被忽略的是：气泡的 transition 如果只写了 opacity，但没配 visibility 切换，会导致气泡“看不见但依然能挡住点击”。正确组合是：opacity 动画 + visibility: hidden 在动画结束后同步设置。
