抛弃自定义模态框：原生Dialog的实力

原文：Ditch Custom Modals: The Power of the Native 

翻译：嘿嘿

自定义模态框的问题

模态窗口是现代 UI 的标准特性，但从零开始创建它们通常会导致一堆混乱的代码。我们都见过这种情况：用一堆 div 拼出来的层级，混乱的 z-index，糟糕的焦点管理，无法关闭的背景，以及缺少像 Esc 键这样的键盘快捷操作。这些问题中的每一个都可能显著降低用户体验。

幸运的是，原生的 <dialog> 元素几乎不需要多少代码，就能解决所有这些问题。它是一个专门为此任务设计的强大、语义化的 HTML 元素。

简单的 HTML 结构

你不再需要一堆纠缠不清的 div 来模拟模态框的结构。原生对话框的 HTML 既简单又清晰。

<button class="open-modal-btn">打开 Modal</button><dialog class=