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

Question

我想知道我的一些网络开发人员/设计人员认为什么是最好的HTML 5元素,用于模式对话框,如灯箱,超级盒,厚箱,或者你最喜欢的风格.

由于这些类型的UI的并不遵循"正常"网页的典型流程(其中,显然,按照HTML 5规范大师本质上是一个博客),他们并不真正陷入类似的地方<header>,<nav>,<section>,<article>或者<footer>(在其他新的"语义"元素中)可能.

当然,总会有<div>,但是,我只是在想,可能会有一些更具语义准确性的东西.

不幸的是,没有<modal>元素.您对规范中是否应该有一个有什么看法？由于元素不存在,您的下一个最佳选择是什么？

Answer 1

<aside>似乎合适.当前规范与相关部分加粗:

aside元素表示页面的一部分,其中包含与aside元素周围的内容相切的内容,并且可以将其视为与该内容分开.这些部分通常在印刷字体中表示为侧边栏.

该元素可用于印刷效果,如拉引号或侧边栏,广告,导航元素组,以及被认为与页面主要内容分开的其他内容.

在这种情况下,模态与引起它的动作"切向相关".虽然您可能通常希望将旁边放在侧边栏中,但语义内容的目的之一是实现不受物理页面特征限制的多功能性.该规范的最后一个短语似乎暗示了这个多功能用例.

Answer 2

HTML的当前草案有一个对话框元素.它被移除了一点但它又回来了.

dialog元素表示用户与之交互以执行任务的应用程序的一部分,例如对话框,检查器或窗口.

对于可访问性(直到元素得到更广泛支持),我还将包括对话框ARIA角色.

要在本机不支持该<dialog>元素的浏览器中获取JavaScript API ,您可以使用polyfill.