模态对话框的语义准确的 HTML5 元素

Question

我想知道我的一些 Web 开发人员/设计师同事认为什么是用于模态对话框（例如 lightbox、superbox、thickbox 或任何您最喜欢的风格）的最佳 HTML 5 元素。

由于这些类型的 UI 不遵循“正常”网页的典型流程（显然，根据 HTML 5 规范专家的说法，该网页本质上是一个博客），因此它们并不像

、

、

、

或

（以及其他新的“语义”元素）可能。

当然，总是有

，但是，我只是想可能有一些语义上更准确的东西。

不幸的是，没有 元素。您对于规范中是否应该包含这一内容有何看法？既然该元素不存在，那么您的下一个最佳选择是什么？

Answer 1

似乎合适。当前规范，相关部分以粗体显示：

aside元素代表一个部分
由内容组成的页面
与切线相关的
side 元素周围的内容，以及
这可以被认为是单独的
来自该内容。这些部分是
通常表示为侧边栏
印刷版式。

该元素可用于
印刷效果，例如引言
或侧边栏，用于广告，用于
导航元素组，以及其他
被视为单独的内容
从页面的主要内容。

在这种情况下，模式与引发它的操作“不相关”。虽然您通常可能期望侧边栏中有旁注，但语义内容的目的之一是实现不受物理页面特征限制的多功能性。规范的最后一句话似乎暗示了这种多功能的用例。

Answer 2

当前的 HTML 草案有一个 dialog 元素。它曾一度被删除，但现在又回来了，并且浏览器开始实现它。 （编辑：到 2022 年，它会出现在所有现代浏览器中。）

对话框元素代表用户可以使用的应用程序的一部分
交互以执行任务，例如对话框、检查器、
或窗口。

为了可访问性（直到该元素得到更广泛的支持），我还将包含 对话框 ARIA 角色。

要在本身不支持

元素的浏览器中获取 JavaScript API，您可以使用 polyfill。

Answer 3

从 2024 年开始，您可以使用 HTML5 提供的对话框 API。

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

https://developer.mozilla.org/en-US/文档/Web/HTML/Element/dialog

const dialog = document.querySelector("dialog");
const showButton = document.querySelector("dialog + button");
const closeButton = document.querySelector("dialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});