如何使用 HTMLlt;dialog> 元素

让我们探索一下

使用的核心方面

HTML 标签创建一个默认隐藏的对话框，可以用作弹出窗口或模态窗口。

弹出窗口经常用于显示简单的通知，例如 Cookie 消息、消失的 Toast 警报、工具提示或右键单击上下文菜单元素。

模态窗口帮助用户专注于特定任务，例如需要用户确认的通知和警告、复杂的交互表单以及图像或视频的灯箱。

弹出窗口不会阻止与页面的交互，而模式窗口会覆盖文档、使背景变暗并阻止其他操作。此行为无需额外的样式或脚本即可实现；唯一的区别是打开对话框的方法。

对话框窗口打开方法

— 弹出窗口：

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

—模态窗口：

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

在这两种情况下，打开<对话框>标签将其 open 属性设置为 true。直接设置它会将对话框作为弹出窗口而不是模式打开。要渲染模态窗口，您必须使用适当的方法。不需要 JavaScript 来创建最初打开的弹出窗口。

<dialog open>Hi, I'm a popup!</dialog>

尝试一下：

• 使用 .show() 方法打开弹出窗口：https://codepen.io/alexgriss/pen/zYeMKJE
• 使用 .showModal() 方法打开模态窗口：https://codepen.io/alexgriss/pen/jOdQMeq
• 直接更改open属性：https://codepen.io/alexgriss/pen/wvNQzRB

对话框窗口关闭方法

对话框窗口以相同的方式关闭，无论它们如何打开。以下是关闭弹出窗口或模式窗口的几种方法：

——使用 .close() 方法：

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

——通过使用 method="dialog" 属性触发表单中的提交事件：

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

— 按 Esc 键：

使用 Esc 关闭仅适用于模式窗口。它首先触发取消事件，然后关闭，从而可以轻松警告用户表单中未保存的更改。

尝试一下：

• 使用 close 方法关闭对话框：https://codepen.io/alexgriss/pen/GRzwjaV
• 通过提交表单关闭对话框：https://codepen.io/alexgriss/pen/jOdQVNV
• 使用 Esc 键关闭模态窗口：https://codepen.io/alexgriss/pen/KKJrNKW
• 防止模式窗口通过 Esc 关闭：https://codepen.io/alexgriss/pen/mdvQObN

关闭时返回值

当使用method="dialog"属性关闭带有表单的对话框时，您可以捕获提交按钮的值。如果您想根据单击的按钮触发不同的操作，这非常有用。该值存储在 returnValue 属性中。

尝试一下：https://codepen.io/alexgriss/pen/ZEwmBKx

仔细看看它是如何工作的

让我们更深入地了解对话框窗口的机制及其浏览器实现的细节。

弹出窗口的机制

打开一个<对话框>作为带有 .show() 的弹出窗口或 open 属性会自动将其定位为 DOM 中的position:absolute。基本 CSS 样式（例如边距和边框）应用于元素，窗口内的第一个可聚焦项目将通过 autofocus 属性自动获得焦点。页面的其余部分保持互动。

模态窗口的机制

模态窗口的设计和工作方式比弹出窗口更复杂。

文档叠加

使用 .showModal() 打开模态窗口时，

层的概念指的是堆叠上下文，它定义了元素如何沿着相对于用户的Z轴定位。在 CSS 中设置 z-index 值会为元素创建一个堆叠上下文，其中子元素的位置是在该上下文中计算的。模态窗口始终位于该层次结构的顶部，因此不需要 z-index。

在 MDN 上了解有关 堆叠上下文 的更多信息。

要了解有关顶层中呈现的元素的更多信息，请访问 MDN。

文件拦截

当模态元素在顶层渲染时，会创建一个与可见文档区域大小相同的 ::backdrop 伪元素。即使设置了指针事件：未设置 CSS 规则，此背景也会阻止与页面其余部分的交互。

除了模态窗口之外的所有元素都会自动设置 inert 属性，阻止用户操作。它会禁用单击和焦点事件，并使屏幕阅读器和其他辅助技术无法访问这些元素。

在 MDN 上了解有关 inert 属性的更多信息。

专注行为

当模式打开时，其中的第一个可聚焦元素会自动获得焦点。要更改最初聚焦的元素，可以使用 autofocus 或 tabindex 属性。无法为对话框元素本身设置 tabindex，因为它是页面上唯一不应用惰性逻辑的元素。

对话框关闭后，焦点返回到打开它的元素。

解决模态窗口的用户体验问题

不幸的是，

滚动阻塞

尽管原生 HTML5 模式窗口创建了一个 ::backdrop 伪元素来阻止与其下方内容的交互，但页面滚动仍然处于活动状态。这可能会分散用户的注意力，因此建议在模式打开时截断正文的内容：

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

每次打开和关闭模态窗口时，都必须动态添加和删除这样的 CSS 规则。这可以通过操作包含以下 CSS 规则的类来实现：

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

如果 :has 选择器的支持状态满足项目的要求，您也可以使用。

<dialog open>Hi, I'm a popup!</dialog>

尝试一下：https://codepen.io/alexgriss/pen/XWOyVKj

通过单击窗口外部关闭对话框

这是模态窗口的标准 UX 场景，可以通过多种方式实现。这里有两种方法可以解决这个问题：

基于 ::backdrop 伪元素行为的方法

单击 ::backdrop 伪元素被视为单击对话框元素本身。因此，如果将模式窗口的整个内容包装在附加的

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

<dialog open>Hi, I'm a popup!</dialog>