dialog元素是实现模态弹窗最轻量语义化的基础结构，需含id的dialog容器、触发按钮和关闭机制，通过close("value")设置returnvalue，监听close事件读取该值，::backdrop需手动设背景色，焦点管理须手动完善。
dialog 元素是现代 HTML 实现模态弹窗最轻量、语义最清晰的基础结构，它天然支持模态行为（焦点捕获、Esc 关闭、遮罩层），但不自带确认/取消按钮逻辑——那些必须手动添加并控制 close() 的参数。
怎么写一个能用的 dialog 基础结构
基础结构只需三部分：一个 <dialog></dialog> 容器、至少一个触发按钮、一个关闭机制。不要套用旧式 alert/confirm 的思维去期待内置按钮或返回值。
-
<dialog id="myDialog"></dialog>必须有id，否则 JS 无法获取实例 - 内部不能只放文字；至少包含一个可交互元素（如
<button></button>），否则焦点管理会出问题 - 不要给
<dialog></dialog>加display: none或hidden—— 它默认就是隐藏的，加了反而干扰原生行为 - 外部触发按钮建议用
<button type="button"></button>，避免表单提交干扰
dialog.close("confirmed") 和 dialog.returnValue 怎么配对用
原生 dialog 不区分“确认”和“取消”，全靠你传入的字符串决定 returnValue 值。这个值只在 close 事件后才有效，且不是事件对象上的属性。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 点击“确认”按钮时，必须显式调用
dialog.close("confirmed") - 点击“取消”按钮时，调用
dialog.close("canceled") - 监听
close事件后，直接读dialog.returnValue，而不是event.returnValue - 用户点遮罩或按 Esc 关闭时，
returnValue是空字符串""，不是"canceled"
为什么 <dialog confirm></dialog> 不生效
这是常见误解：confirm 不是 <dialog></dialog> 的合法属性，浏览器会静默忽略。也没有 dialog.confirm() 这样的方法。
-
<dialog confirm></dialog>、<dialog type="confirm"></dialog>都无效 - 所有按钮行为都得靠 JS 绑定，比如
confirmBtn.onclick = () => dialog.close("confirmed") - 如果想复用逻辑，建议封装成函数，接收
dialog实例和两个回调：一个用于确认后执行，一个用于取消后执行
CSS 层级和 backdrop 样式要自己补
dialog 元素自身不渲染 backdrop（灰色遮罩），但浏览器会在其背后自动插入一个伪元素 ::backdrop。这个伪元素默认无样式，所以你得手动加背景色。
- 必须写
dialog::backdrop { background-color: rgba(0, 0, 0, 0.5); }，否则遮罩不可见 -
z-index对dialog本身无效（它由浏览器自动设为最高层），但对::backdrop有效 - 居中显示靠
margin: auto+position: absolute或transform: translate(-50%, -50%)，别依赖 flex - 移动端要注意
max-width和padding，否则内容可能溢出或过小
真正容易被忽略的是：dialog 的可访问性依赖完整焦点环和键盘导航（Tab 循环），而这个逻辑必须手动补全——仅靠 showModal() 不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
