HTML原生alert()不支持进度条，因其为阻塞式系统级对话框，脱离DOM且不解析HTML/CSS/JS；需改用自定义模态框（遮罩层+progress元素+JS更新）或Sweetalert2等封装库。
HTML 原生 alert() 不支持进度条，这是硬限制，没法绕过。 所有试图在 alert() 里塞 HTML、CSS 或 JS 的方案都无效——浏览器会直接忽略渲染逻辑，只显示纯文本。
为什么 alert() 不能加进度条
因为 alert() 是阻塞式原生对话框，由操作系统或浏览器 UI 层直接接管，完全脱离 DOM 渲染流程。它不解析 HTML，不执行 JS，也不响应 CSS。传入的字符串哪怕包含 <progress></progress> 或 <div> 标签，也只会作为纯文本显示出来。
<h3>替代方案：用自定义模态框模拟“警告+进度”效果</h3>
<p>真实项目中必须放弃 <code>alert()，改用可控制的 DOM 模态框。核心思路是：遮罩层 + 内容容器 + 进度更新逻辑。常见做法：
- 用
position: fixed遮罩整个视口，z-index设高确保盖住其他内容 - 模态框内部放
<progress></progress>元素或带width的<div> 模拟进度条 <li>用 JS 控制 <code>progress.value或style.width实时更新（比如配合setTimeout或fetch的上传进度） - 禁用背景滚动（
document.body.style.overflow = 'hidden'），关闭时恢复
示例片段：
立即学习“前端免费学习笔记（深入）”；
<div id="alertModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999;">
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; border-radius:4px;">
<p>操作进行中…</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>
<progress id="modalProgress" value="0" max="100"></progress>
</div>
</div>
然后用 JS 控制显示和更新：document.getElementById('alertModal').style.display = 'block';，再定时调用 progress.value++ 即可。
第三方库推荐（仅当需快速落地）
如果不想手写样式和交互逻辑，可选轻量级方案：
-
Sweetalert2：支持自定义 HTML 内容、进度条插件（showLoaderOnConfirm+preConfirm）、按钮禁用等 -
noty或toastr：更适合通知类场景，但原生不支持进度条，需手动扩展 DOM - 避免用
Bootstrap Modal做“警告”用途——它本为复杂交互设计，体积大且默认不阻塞用户点击其他区域
注意：Sweetalert2 的进度条本质仍是 DOM 元素，不是真弹窗，但它封装了遮罩、焦点捕获、ESC 关闭等细节，省去大量边界处理。
真正难的不是画一条进度条，而是让整个模态框行为接近原生警告框：焦点锁定、键盘拦截（Tab/ESC）、屏幕阅读器兼容、移动端触摸穿透防护——这些细节容易被忽略，但用户一碰就暴露问题。
