关闭按钮必须置于内部且仅在showmodal()打开时有效；外部获取或show()打开均失效；唯一免js关闭方式是form[method="dialog"]作直接子元素，提交后通过close事件读取returnvalue。
dialog 关闭按钮必须放在内部，且依赖 showModal() 状态
直接写 <button onclick="myDialog.close()">×</button> 是无效的，除非 myDialog 是已通过 showModal() 打开的 <dialog></dialog> 元素。如果对话框是用 show() 打开、或尚未调用任何方法（仅靠 open 属性）、或 DOM 中还不存在，点击就会报错 Cannot read property 'close' of null 或静默失败。
常见错误场景：
- 按钮在
<dialog></dialog>外部，用document.getElementById()获取后调close()—— 可行，但需确保元素存在且已打开 - 按钮在内部，但
<dialog></dialog>是用show()打开的 ——close()有效，但不触发模态行为（如 backdrop、Esc 键、焦点锁定） - 用了
showModal()，但关闭按钮是<input type="submit">且没包<form method="dialog"></form>—— 不会自动关闭
用 form[method="dialog"] 实现免 JS 关闭
这是唯一不写 JS 就能关闭 <dialog></dialog> 的原生方式，但条件非常具体：
-
<form></form>必须是<dialog></dialog>的**直接子元素**，中间不能嵌套<div> 或其他容器 <li> <code><dialog></dialog>必须已通过showModal()打开（show()不行） - 提交控件必须是
<button type="submit"></button>或可触发表单提交的元素（如回车聚焦输入框） - 表单不能有
onsubmit="return false"或event.preventDefault()，否则自动关闭逻辑被截断
最小可行结构：
<dialog id="myDialog"><p>确认删除？</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<form method="dialog">
<button type="submit">确定</button>
</form>
</dialog>
自定义 X 按钮要加 type="button" 和 aria-label
如果不用表单提交机制，而是纯点击关闭，按钮语义和可访问性必须到位：
- 务必设
type="button"，否则在表单上下文中默认是submit，可能意外触发表单提交或刷新 - 必须加
aria-label="关闭"，否则屏幕阅读器无法识别功能 - 推荐用
this.closest('dialog').close()而非硬编码 ID，提高组件复用性 - 不要用
onclick="modal.close()"且modal是个<div> —— <code><div> 没有 <code>close()方法，控制台报错modal.close is not a function正确写法示例：
<dialog><button type="button" aria-label="关闭" onclick="this.closest('dialog').close()">×</button> <p>内容</p> </dialog>关闭后读取返回值要监听
close事件如果你用
form[method="dialog"]提交关闭，表单数据会自动赋给dialog.returnValue，但这个值**只在关闭后瞬间有效**，下次再打开就清空了。不能在按钮点击时立刻读，必须监听事件：- 必须用
dialog.addEventListener('close', () => { console.log(dialog.returnValue) }) - 如果用
await dialog.showModal()，则返回值就是showModal()的 Promise 结果，无需额外监听 -
dialog.returnValue是字符串或 FormData，不是自动解析的 JSON —— 若需对象，得手动JSON.parse()或Object.fromEntries(new FormData(form))
容易忽略的一点：如果用户按 Esc 或点 backdrop 关闭，
returnValue是空字符串，不是undefined，判断时注意区分。 - 必须用
