HTML怎么用原生脚本编写无阻断警告对话框-html教程-PHP中文网

无阻断警告对话框是用div+CSS+JS模拟的非阻塞式提示框，弹出时脚本继续执行、页面仍可交互；需手动实现遮罩层、焦点管理、ESC关闭及无障碍支持（如aria-modal、焦点还原），无法用原生alert()或替代。

html怎么用原生脚本编写无阻断警告对话框

什么是“无阻断警告对话框”

浏览器原生的 alert() 是阻断式：弹出后 JS 会暂停执行，用户必须点确定才能继续。所谓“无阻断”，是指弹窗出现时脚本仍可运行、页面仍可交互（比如继续滚动、点击其他按钮），同时保持视觉上类似警告的提示效果。

这无法用 alert()、confirm() 或 prompt() 实现——它们全是同步阻断 API，且不可样式化、不可取消阻断行为。

用 `div` + CSS + JS 模拟警告框的最小可行方案

核心思路是手动创建 DOM 元素，控制显隐和层级，不依赖任何第三方库。

用一个带 position: fixed 的 div 作遮罩层（z-index: 9999），防止底层点击
内部嵌套一个居中卡片，包含标题、消息体、确认按钮（可选取消）
点击按钮后移除整个 DOM 节点，或设 display: none 复用
务必监听 Escape 键关闭，否则体验断裂

示例片段：

function showWarning(message, onConfirm) {
  const overlay = document.createElement('div');
  overlay.style.cssText = `
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9999; display: flex;
    justify-content: center; align-items: center;
  `;

  const box = document.createElement('div');
  box.innerHTML = `
    <h3>警告</h3>
    <p>${message}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill" class="overflowclass">htmlppt.skill</a>
													<p class="overflowclass">把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    <button id="warning-ok">确定</button>
  `;
  box.style.cssText = `
    background: white; padding: 20px; border-radius: 4px;
    text-align: center; max-width: 400px; width: 90%;
  `;

  overlay.appendChild(box);
  document.body.appendChild(overlay);

  const btn = box.querySelector('#warning-ok');
  btn.onclick = () => {
    document.body.removeChild(overlay);
    if (typeof onConfirm === 'function') onConfirm();
  };

  // ESC 关闭
  const escHandler = e => e.key === 'Escape' && document.body.removeChild(overlay);
  document.addEventListener('keydown', escHandler);
  btn.onblur = () => document.removeEventListener('keydown', escHandler);
}