底部悬浮条弹窗需用fixed布局打底、CSS动画驱动显隐、JS控制状态与持久化：初始transform: translateY(100%)，显示/关闭切.show/.closed类触发滑入滑出动画，监听focus/blur临时隐藏防键盘遮挡，关闭时存时间戳至localStorage并校验有效期，同时重置tabindex和合理设置z-index。
底部悬浮条弹窗效果不是“弹窗 + 悬浮”两个词拼起来就行，核心矛盾在于：既要像弹窗一样可控显隐、带动画、可关闭，又得保持 position: fixed 的视口锚定能力——而原生 dialog 标签不支持底部定位，display: none 会丢动画，bottom: 0 直接写死又遮内容。真正能落地的方案只有一条路：用 fixed 布局打底，CSS 动画驱动显隐，JS 控制状态与持久化。
为什么不能直接用 dialog 实现底部弹窗
浏览器对 dialog.showModal() 有强干预：它会重置 position、忽略你写的 bottom: 0，且 backdrop 渲染依赖默认居中流式布局。强行覆盖会导致 backdrop 不显示（尤其 Safari）、焦点卡在不可见区域、键盘用户 Tab 失效。实测中，哪怕加了 position: fixed; bottom: 0，调用 showModal() 后样式立刻被清空。必须改用 dialog.show() 配合手动画遮罩和焦点管理，否则就是埋雷。
transform: translateY() 是唯一靠谱的入场/退场动画方式
用 top 或 bottom 做动画会触发 layout，低端安卓 WebView 明显掉帧；用 opacity 单独动又显得“飘”，缺乏物理感。正确做法是：
- 初始状态设为
transform: translateY(100%)（完全移出视口下方） - 显示时加
.show类，内含transform: translateY(0)和transition: transform 0.3s ease-out - 关闭时加
.closed类，对应transform: translateY(100%)+opacity: 0 - 动画结束后用
setTimeout移除 DOM 或清空定时器，避免内存残留
移动端输入框弹起时悬浮条必须临时隐藏
iOS Safari 软键盘弹出会把 fixed 元素顶到半空，甚至盖住输入框本身。这不是 bug，是 viewport 缩放响应行为。不能靠 env(safe-area-inset-bottom) 一劳永逸——它只解决导航键，不解决键盘。实操必须：
立即学习“前端免费学习笔记（深入）”；
- 监听
input和textarea的focus事件，触发时设element.style.display = 'none' -
blur后延时 300ms 再恢复，防止快速切换导致闪烁 - 若页面有多个输入控件，统一用事件委托绑定，避免重复监听
- 别用
resize监听判断键盘高度——Android 和 iOS 触发时机差异大，简单场景 focus/blur 更稳
关闭状态持久化不能只存 true/false
用户点 × 关闭后刷新又出现，体验崩坏。但仅存 localStorage.setItem('barClosed', 'true') 会带来三个问题：隐私模式下报错、多设备不同步、无法设置过期时间。正确做法是：
- 关闭时存时间戳：
localStorage.setItem('footerBarClosed', Date.now().toString()) - 初始化时读取：
const closedAt = localStorage.getItem('footerBarClosed') - 检查是否距今不足 24 小时（或按业务设阈值），超时则自动失效
- 若需跨设备同步，得走后端接口，前端 localStorage 只作降级兜底
最易被忽略的是：关闭后没重置 tabindex，键盘用户 Tab 到已隐藏区域会卡住；还有 z-index 设太高（比如 9999），反而干扰 modal、toast 等真正需要高权的组件。
