WordPress 页面中禁用 alert()，应改用语义化警告横幅（role="alert"）或原生 模态框；需确保 DOM 加载完成、正确移除元素、区分前后端提示机制，并验证无障碍与内存释放。

alert() 不能用在 WordPress 页面里做用户可见警告——它阻塞脚本、移动端常被拦截、样式不可控，且在 Gutenberg 编辑器或 SSR 渲染场景下可能直接报错 ReferenceError: alert is not defined。

WordPress 页面中插入可访问的警告横幅（role="alert"）

适合轻量提示，比如表单提交成功、库存预警、权限变更等不打断操作但需用户知晓的场景。

• 结构必须带语义：
  ⚠️ 您的试用期还剩 2 天
• CSS 关键点：固定顶部 + 高 z-index + 可读配色，例如 background: #fff3cd; color: #856404; position: fixed; top: 0; width: 100%; z-index: 10000;
• 关闭后必须调用 element.remove()，不能只设 display: none——否则仍留在 DOM 中，干扰焦点流和读屏软件
• 若由 PHP 动态生成（如根据用户角色判断），确保只在需要时输出 HTML，避免空警告占位

在 Gutenberg 页面中安全嵌入

模态框

WordPress 前端页面支持原生

，但需绕过编辑器对自定义 HTML 的过滤限制。

• 用 Custom HTML 区块插入完整结构，例如：查看风险说明

  此操作不可撤销

  

  Amazon Keyword Research

  亚马逊关键词研究与市场机会分析（面向卖家）。获取自动补全建议（长尾关键词）、分析竞品格局、……

  下载

  我已知晓
• 必须用 JS 触发显示：document.getElementById('trigger-warn').addEventListener('click', () => document.getElementById('risk-dialog').showModal())
• 常见报错 Failed to execute 'showModal' on 'HTMLDialogElement' 通常因元素未挂载到 DOM —— 解决方法是加 setTimeout(() => dialog.showModal(), 0) 或确保脚本在 DOMContentLoaded 后执行
• 不要在 functions.php 里用 wp_add_inline_script 注入含 showModal() 的代码，除非明确绑定到用户手势（如按钮点击），否则 Safari 和部分安卓 WebView 会静默拒绝

避免在 WordPress 后台 PHP 提示中混用前端警告逻辑

WordPress 后台 PHP 钩子（如 admin_notices）输出的是服务器端 HTML，和前端 JS 警告不是一回事；误把 alert() 写进 PHP echo 会导致 JS 语法错误或空白页。

• 后台提示应走标准机制：echo '

  主题未配置

  ';，由 WordPress 自动加样式和可关闭逻辑
• 如果需要在后台触发前端警告（比如保存失败后弹窗），必须用 wp_add_inline_script 注入一段仅在当前页面执行的 JS，并确保它依赖 jQuery 或原生事件委托，而非直接操作尚未渲染的 DOM 节点
• 别在 login_footer 里写 alert() —— 登录页无用户上下文，Chrome 会拦截，且破坏无障碍流程

真正难的不是“怎么让文字弹出来”，而是“谁该看到它”“它该持续多久”“关掉后是否真从内存释放”。很多 WordPress 插件的警告框关了还在 DOM 里挂着，既吃内存，又让键盘 Tab 焦点卡住，还被读屏软件反复播报——上线前务必检查 document.querySelectorAll('dialog[open]').length 和 document.querySelectorAll('[role="alert"]').length 是否归零。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！