原生 alert() 样式无法修改，因受浏览器安全策略限制；必须改用 元素或第三方库实现可定制弹窗，兼顾语义、样式、无障碍与兼容性。
原生 alert() 样式根本不能改
浏览器强制锁定 alert() 的 UI，任何 CSS、JS 注入或 Shadow DOM 操作都无效——这是安全策略，不是 bug。你看到的按钮文字、圆角、阴影、字体，全由操作系统和浏览器底层控制，alert() 里连传 HTML 字符串都会被转义为纯文本。
所以别折腾 alert() 的样式了，真要美化，必须换方案。
用 dialog 元素 + CSS 实现可定制弹窗
<dialog></dialog> 是现代浏览器原生支持的模态容器（Chrome 97+、Firefox 98+、Safari 15.4+），语义正确、自带 backdrop、支持 showModal() 和 close()，且完全可样式化。
- 基础结构：
<dialog id="myAlert"> <p>操作成功！</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <button onclick="this.closest('dialog').close()">确定</button> </dialog> - 关键样式要点：
- 用
backdrop伪元素控制遮罩层：dialog::backdrop { background: rgba(0,0,0,0.5); } - 取消默认边框和内边距：
dialog { border: none; padding: 0; } - 居中需手动设置：
dialog { margin: 0; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }（注意：不加position时transform无效）
- 用
- 兼容性兜底：老版本 Safari 或 IE 需用
display: none/block+ 手动管理焦点和 ESC 关闭逻辑
封装一个轻量 customAlert() 函数替代原生调用
把 <dialog></dialog> 封装成函数，保持调用习惯，避免重复写结构：
function customAlert(message) {
const dialog = document.getElementById("custom-alert-dialog");
const p = dialog.querySelector("p");
p.textContent = message;
dialog.showModal();
}
// 对应 HTML：
<dialog id="custom-alert-dialog">
<p></p>
<button onclick="this.closest('dialog').close()">确定</button>
</dialog>
进阶可加参数支持标题、按钮文字、回调：
customAlert("删除后不可恢复", { title: "警告", confirmText: "我已知晓", onConfirm: () => console.log("用户确认") })- 注意：不要在回调里直接写
alert()，否则又掉回原生限制 - 若需键盘支持（如回车触发确认），需监听
keydown并过滤Enter和Escape
第三方库只是省事，但要注意体积和侵入性
像 sweetalert2 或 noty 确实开箱即用，但引入 50KB+ JS/CSS 可能只为改个提示框，得不偿失。更关键的是：
- 它们通常劫持全局
alert，可能和已有代码冲突（比如某些监控 SDK 会 patch 原生方法） - 动画依赖
requestAnimationFrame或 CSS transitions，低端设备上易卡顿 - 无障碍支持参差不齐：部分库没自动设
aria-modal="true"或没管理焦点流，导致屏幕阅读器行为异常 - 如果项目已用 Tailwind 或 Bootstrap，优先用其组件系统（如
Toast或Modal）复用现有设计语言，而非另起一套
真正难的不是让弹窗好看，而是确保它在键盘导航、暗色模式、缩放 200%、屏幕阅读器下都可用——这些细节比圆角像素值重要得多。
