<dialog> 是 HTML5 原生对话框元素，提供浏览器内置的模态/非模态弹窗能力。使用 showModal() 方法打开模态框时，浏览器会自动处理焦点管理、ESC 关闭、背景遮罩（::backdrop）等，无需额外 JS 库。

showModal() 以模态方式打开，显示 ::backdrop 遮罩层，阻止与页面其他元素交互，按 ESC 可关闭。show() 以非模态方式打开，无遮罩层，用户仍可与页面其他部分交互。

::backdrop 是 dialog 使用 showModal() 时浏览器自动生成的背景遮罩层。可通过 CSS 自定义其背景色、透明度、模糊效果（backdrop-filter）等，是实现精美遮罩效果的关键。

使用 CSS @keyframes 配合 dialog[open] 选择器即可为打开添加动画。关闭动画较复杂，需使用 JavaScript 监听关闭事件并延迟调用 close()，或使用 transition 配合样式切换。本工具生成的代码已包含打开动画。

现代浏览器（Chrome 37+、Edge 79+、Firefox 98+、Safari 15.4+）均已支持。对于老旧浏览器，可使用 dialog-polyfill 进行兼容。

原生 showModal() 不会在点击遮罩层时自动关闭。如需此功能，可添加事件监听：检测点击位置是否在 dialog 外部，然后调用 close()。本工具生成的 HTML 示例中包含了此逻辑。