原生 BOM 弹窗无法自定义样式和交互逻辑，必须用 HTML+CSS+JavaScript 模拟；浏览器出于安全与一致性限制其外观、行为及调用上下文；DOM 模拟需创建遮罩层与弹窗容器，控制显隐与回调；推荐使用 SweetAlert2 等成熟库，避免自行封装引发兼容性与可访问性问题。
原生 BOM 弹窗（alert、confirm、prompt）无法自定义样式和交互逻辑，要实现真正“自定义提示框”，必须用 HTML + CSS + JavaScript 模拟，而不是改造原生弹窗。
为什么不能直接自定义原生 BOM 弹窗
浏览器出于安全和一致性考虑，严格限制了 alert、confirm、prompt 的外观与行为：无法修改字体、颜色、按钮文字、位置，也无法绑定事件或添加图标。它们会阻塞 JS 执行（同步），且在多数现代浏览器中已被禁止在非用户触发上下文中调用（如异步加载后直接弹出）。
用 DOM 模拟一个轻量级自定义提示框
核心思路是动态创建遮罩层（overlay）和弹窗容器（modal），用 CSS 控制样式，用 JS 控制显隐与回调。
- 创建一个带 backdrop 的
<div class="modal">，内部包含标题、内容、按钮区域 - 用
position: fixed居中定位，配合z-index确保层级高于页面内容 - 点击遮罩层或「取消」「关闭」按钮时隐藏弹窗，并执行传入的回调（如
onCancel） - 点击「确定」按钮时，先执行验证逻辑（如检查输入），再调用
onConfirm并隐藏
示例关键代码片段：
立即学习“Java免费学习笔记（深入）”；
function showAlert(message, onConfirm = () => {}) {
const modal = document.createElement('div');
modal.className = 'custom-alert';
modal.innerHTML = `
<div class="alert-overlay"></div>
<div class="alert-box">
<p class="alert-message">${message}</p>
<button class="alert-btn confirm">确定</button>
</div>
`;
document.body.appendChild(modal);
<p>modal.querySelector('.confirm').onclick = () => {
document.body.removeChild(modal);
onConfirm();
};
modal.querySelector('.alert-overlay').onclick = () => {
document.body.removeChild(modal);
};
}推荐使用成熟的轻量库（如 SweetAlert2）
自己封装易出兼容性或可访问性问题。SweetAlert2 是目前最主流的选择，零依赖、支持 Promise、主题灵活、键盘操作友好（ESC 关闭、Tab 切换）。
- 引入方式简单：
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> - 基础用法：
SweetAlert2.fire('操作成功', '数据已保存', 'success') - 支持确认框：
SweetAlert2.fire({ title: '确定删除？', showCancelButton: true }).then(result => { if (result.isConfirmed) { /* 执行删除 */ } }) - 支持输入框、HTML 内容、自定义图标、动画、国际化等
注意事项与最佳实践
- 避免滥用弹窗：频繁打断用户操作体验差，优先考虑内联提示、Toast 或状态栏反馈
- 确保可访问性：为弹窗添加
role="dialog"、aria-modal="true"，焦点进入时锁定，关闭后恢复原焦点 - 响应式设计：在移动端需适配宽度、字体大小和点击热区
- 不要覆盖原生方法（如重写
window.alert）：会影响调试、第三方脚本，且无法解决根本限制
