dialog元素默认隐藏且必须用JavaScript的show()或showModal()触发显示，需手动close()关闭，无点击遮罩自动关闭功能，并须自定义CSS样式及动态注入内容。

dialog 元素必须配合 JavaScript 才能显示

直接写 <dialog></dialog> 在页面里，它默认是隐藏的，连 display: block 都不会生效——这是最常被卡住的第一步。浏览器对 <dialog> 的实现严格遵循“显式控制”原则，没有 JS 调用 show() 或 showModal()，它就永远不出现。

实操建议：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 确保 <dialog> 是 document 的直系子元素（或至少在 body 内），避免套在 <div> 或 flex 容器中导致定位异常
• 用 showModal() 而不是 show()：前者会自动加背景遮罩、禁用底层交互、支持 Esc 关闭，更适合“兑换成功”这类需要用户确认的提示
• 别忘了给 <dialog> 加 id，比如 id="success-dialog"，方便 JS 获取和操作

点击“确认”后必须手动调用 close()，否则 dialog 不会消失

很多人以为点按钮就自动关了，其实 <dialog> 没有内置的“点击外部关闭”逻辑（showModal() 下点击遮罩也不关），所有关闭动作都得你写 dialog.close()。

常见错误现象：dialog 弹出后点按钮没反应、点遮罩无反馈、反复点击弹多个实例。

立即学习“前端免费学习笔记（深入）”；

实操建议：

• 绑定按钮的 click 事件，明确调用 document.getElementById('success-dialog').close()
• 监听 close 事件做后续动作，比如跳转、刷新列表：dialog.addEventListener('close', () => { location.reload(); })
• 避免重复调用 showModal()：每次弹之前先检查是否已打开，可用 dialog.open 属性判断（返回布尔值）

样式必须自己补全，浏览器默认极简且不统一

<dialog> 在 Chrome/Firefox 中默认只有基础框线和居中，Safari 15.4+ 才支持，且无圆角、阴影、字体大小等任何修饰。不加 CSS，用户看到的就是一个灰白方块。

实操建议：

• 至少设置 border-radius、box-shadow、padding 和 font-family，例如：

  dialog {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI';
  }

• 用 dialog::backdrop 控制遮罩层样式，比如：

  dialog::backdrop {
    background-color: rgba(0,0,0,0.5);
  }

• 注意 Safari 对 ::backdrop 的兼容性较弱，如需强兼容，可改用自定义遮罩层（但那就脱离原生 dialog 语义了）

积分兑换成功提示要带关键信息，别只写“成功”两个字

用户刚完成兑换，最关心的是：兑了什么？扣了多少积分？实物/虚拟权益何时到账？这些信息如果藏在 JS console 里或者靠用户脑补，等于没提示。

实操建议：

• 把动态内容用 JS 注入 <dialog> 内部，比如：

  const dialog = document.getElementById('success-dialog');
  dialog.innerHTML = `
    <h3>✅ 兑换成功！</h3>
    <p>已扣除 <strong><code>${usedPoints}</code></strong> 积分</p>
    <p>奖励：「<code>${rewardName}</code>」将于 24 小时内发放</p>
    <button id="confirm-btn">我知道了</button>
  `;

• 按钮文字别用“确定”“OK”，优先用“我知道了”“去查看”等有引导性的表述
• 如果涉及实物发货，记得加一句“预计 3-5 个工作日送达”，降低客服咨询量

原生 <dialog> 看似简单，但它的“可控性”恰恰是双刃剑：不写 close 就关不掉，不设样式就难看，不传数据就空泛。真正落地时，90% 的问题都出在“以为它像 alert 那样开箱即用”。