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

Question

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

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

 <header>

、

<nav>

、

<section>

、

<article>

或

<footer>

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

当然，总会有

<div>

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

不幸的是，没有

<modal>

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

Answer 1

<aside>

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

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

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

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

Answer 2

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

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

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

要在本身不支持

<dialog>

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

Answer 3

自 2024 年起，您可以使用 HTML5 提供的 Dialog API。

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

https://developer.mozilla.org/en-US/docs/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();
});