移动端警告对话框禁用alert()，应优先使用顶部横幅提示；若需模态框，现代浏览器支持但须在用户手势中调用、手动实现遮罩层、限制高度并处理滚动；自定义弹窗须防XSS、彻底销毁DOM、统一关闭逻辑。

移动端警告对话框别用 alert()

它在 iOS Safari 和部分 Android 浏览器里会被系统拦截，点不响应；即使弹出来也阻塞脚本、无法定制样式、不支持点击输入框自动收起。用户看到的是白屏卡顿，不是警告——这在表单校验、支付确认等关键路径上等于直接丢转化。

<dialog></dialog> 在手机端能用，但得绕过两个坑

现代移动浏览器（Chrome for Android 97+、Safari iOS 16.4+、Edge Mobile 108+）已支持 <dialog></dialog>，但它默认行为在触屏设备上容易出问题：

• 调用 showModal() 必须在用户手势上下文中，比如 onclick 或 ontouchend 回调里；fetch 成功后直接调会报 Failed to execute 'showModal' on 'HTMLDialogElement'
• iOS Safari 对 ::backdrop 支持不稳定，遮罩层可能不显示或点击穿透；建议用额外的 <div class="dialog-overlay"> 手动覆盖，而非依赖原生 backdrop <li>模态框内容高度超过视口时，iOS 上滚动会卡顿或焦点丢失；必须加 <code>style="max-height: 80vh; overflow-y: auto;" 到 dialog 内容容器，且禁止父容器有 transform 或 overflow: hidden

轻量警告优先用顶部固定横幅 + aria-live

对“预算超支”“网络异常”“格式错误”这类非中断型提示，横幅比弹窗更可靠：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• DOM 结构要放在 最外层，避免被 transform 容器裁剪： <div id="warn-banner" role="alert" aria-live="assertive" hidden></div>
• CSS 必须含安全区适配：padding-top: env(safe-area-inset-top)，否则 iPhone 刘海下会遮挡文字
• 显示后 3 秒自动隐藏，但监听 focusin 到任意 <input> 或 <textarea></textarea> 时立即 element.remove()，不能只设 hidden —— 否则仍占 DOM、干扰读屏软件、可能挡住软键盘弹起后的输入框

自定义弹窗要防 XSS，且关闭逻辑必须解耦

如果业务要求带按钮的确认流（如“退出编辑？保留/放弃”），手写弹窗比强依赖 <dialog></dialog> 更可控：

立即学习“前端免费学习笔记（深入）”；

• 消息体一律用 textContent 设置，禁用 innerHTML 渲染用户输入内容，否则 message = "<img src="x" onerror="alert(1)" alt="HTML手机端页面怎么适配警告对话框" >" 就可触发 XSS
• 关闭操作不能只靠 display: none，每次关闭后必须执行 dialogEl.remove() 或至少 dialogEl.innerHTML = "" 清空内容，防止事件监听器残留、内存泄漏、焦点陷阱
• ESC 键和遮罩层点击关闭必须共用同一销毁函数，避免重复移除报错；建议封装为 destroyDialog(id) 统一入口

真正难的不是让警告“出现”，而是让它“彻底消失”——DOM 节点清没清、焦点回没回、读屏播报停没停、软键盘会不会被挡住。这些细节在线上环境里不会报错，但会让用户反复点击、误操作、甚至放弃流程。