alert()无法自定义样式，必须用dom手动构建遮罩层+弹窗容器，通过position:fixed、z-index、transform居中实现模态效果，并支持点击遮罩/关闭按钮/esc键关闭，同时兼顾可访问性与防重复调用。
用 alert() 无法自定义样式，必须用 DOM 手动构建
alert() 是浏览器原生弹窗，样式完全不可控，连字体大小、按钮文字、背景色都改不了。想实现“自定义样式”，本质是用 div 模拟一个浮层，配合 CSS 控制外观和交互逻辑。
关键点不是“弹出来”，而是“挡住底层内容 + 点击空白处或关闭按钮能收起 + 键盘按 Esc 也能关闭”。否则用户会觉得卡死或体验割裂。
- 必须给遮罩层（overlay）加
position: fixed和z-index，否则可能被其他元素盖住 - 提示框本体要设
position: fixed或absolute，并手动计算居中（top: 50%; left: 50%; transform: translate(-50%, -50%)最稳） - 遮罩层需监听
click事件，但只在点击自身时关闭，不能响应内部提示框的点击（否则一点内容就关了）
如何用纯 HTML/CSS/JS 实现可复用的弹窗函数
封装一个 showCustomAlert(message, options) 函数最实用，避免每次重复写结构。它内部动态创建 DOM 节点，而不是提前写死在 HTML 里——这样多个按钮调用互不干扰。
示例核心逻辑：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
function showCustomAlert(message, options = {}) {
const overlay = document.createElement('div');
overlay.className = 'custom-alert-overlay';
const dialog = document.createElement('div');
dialog.className = 'custom-alert-dialog';
dialog.innerHTML = `
<p class="alert-message">${message}</p>
<button class="alert-close-btn">×</button>
`;
overlay.appendChild(dialog);
document.body.appendChild(overlay);
// 关闭逻辑（含 Esc 键）
const close = () => {
document.body.removeChild(overlay);
};
overlay.addEventListener('click', e => e.target === overlay && close());
dialog.querySelector('.alert-close-btn').addEventListener('click', close);
document.addEventListener('keydown', e => e.key === 'Escape' && close());
}
注意：不要用 innerHTML 渲染用户输入的内容，有 XSS 风险；真实项目中应使用 textContent 设置消息。
CSS 样式要点：遮罩层透明度、过渡动画、焦点管理
没动画的弹窗显得生硬，但过渡太慢又拖沓。推荐用 opacity + visibility 组合控制显隐，比单纯 display: none 更利于动画衔接。
- 遮罩层用
background: rgba(0,0,0,0.6)，别用opacity: 0.6，否则内部弹窗也会变透明 - 弹窗本身加
box-shadow和圆角，视觉上更“浮起”；禁用outline，但要用focus-visible保证键盘用户可操作 - 必须设置
tabindex="-1"到弹窗容器，并在显示后自动.focus()，否则键盘 Tab 会跳过整个浮层，不符合可访问性要求
点击按钮触发时，常见错误和修复方式
最常见的问题是多次点击按钮，导致多个弹窗层叠——因为没做防重复调用限制。另一个是关闭后 document.body 里残留节点，造成内存泄漏或后续样式错乱。
- 在
showCustomAlert开头加判断：if (document.querySelector('.custom-alert-overlay')) return; - 移除节点前，先清除所有事件监听器（尤其是全局的
keydown），或改用一次性监听（{ once: true }） - 如果按钮本身是动态生成的（比如通过 AJAX 加载），确保事件绑定用事件委托，而不是直接绑在可能不存在的节点上
- 移动端要注意
touchstart替代click，避免 300ms 延迟导致点击无响应
真正难的不是让框弹出来，而是让它在各种边界条件下（快速连点、缩放页面、切后台再切回、屏幕阅读器模式）都表现一致。样式可以慢慢调，但交互逻辑一旦漏掉一种情况，用户就会卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
