用 position: fixed + bottom: 0 实现底部弹窗最可控；modal-footer 应通过 flex 布局（margin-top: auto）贴底，而非绝对定位；移动端需加 will-change、监听 resize、避免 footer 内放输入框，并确保点击区域≥44×44px。
直接用 position: fixed + bottom: 0 实现底部弹窗最可控，不依赖第三方库，也避免 window.open 或 alert 的限制和兼容性问题。
为什么不用 window.open 做底部弹窗
它打开的是全新浏览器窗口或标签页，无法精确定位到页面底部，也不能覆盖当前页面内容；现代浏览器普遍拦截非用户主动触发的 window.open 调用，且移动端基本失效。你真正需要的是一个「页面内浮动层」，不是新窗口。
modal-footer 固定在弹窗底部的关键写法
不要把 footer 写成绝对定位后硬塞进弹窗内容区——那样会随内容滚动或溢出。正确做法是让整个弹窗容器（.modal）用 flex 布局，footer 占固定高度并 margin-top: auto 推到底部：
-
.modal-content设为display: flex; flex-direction: column; height: 100%; -
.modal-body加flex: 1; overflow-y: auto;，保证内容多时可滚动但不撑高 footer -
.modal-footer不设position: absolute，只设固定height或padding，靠margin-top: auto自动贴底
示例片段：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
.modal-content {
display: flex;
flex-direction: column;
height: 300px; /* 显式高度才能让 flex 生效 */
background: #fff;
}
.modal-body {
flex: 1;
padding: 16px;
overflow-y: auto;
}
.modal-footer {
height: 52px;
padding: 0 16px;
margin-top: auto;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
}
移动端适配底部弹窗的三个硬约束
iOS Safari 和部分安卓 WebView 对 fixed 元素在键盘唤起、地址栏收放时行为不稳定，必须加防护：
- 给
.modal加will-change: transform，减少重排重绘抖动 - 监听
resize事件，在键盘弹出后手动重设bottom值（例如：键盘高度 ≈window.innerHeight - document.documentElement.clientHeight） - 避免在
.modal-footer里放input或textarea—— 它们会触发键盘，导致 footer 被顶出视口，改用外部输入+按钮触发逻辑
最易被忽略的是：footer 的点击区域必须足够大（至少 44×44px），否则 iOS 会判定为不可点；同时，如果弹窗本身没有显式 height 或 max-height，flex 布局在 Safari 中可能完全失效——这点连很多 CSS 框架都没处理好。
