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

我想知道我的一些其他Web开发者/设计者认为是使用了模态对话框像一个灯箱，superbox，ThickBox的，或任何你喜欢的最好的HTML 5元味道可能碰巧是。由于这些类型的用户界面并不遵循'普通'网页（显然，根据HTML 5规范大师，本质上是一个博客）的典型流程，它们并不真正落实到位像<header>，<nav>，<section>，<article>或<footer>（除其他新的 '语义' 的元件）可能。语义正确的HTML5元素的模态对话框

当然，总是有<div>，但是，我只是觉得有些语义上可能更精确。

不幸的是，没有<modal>元素。对于规范中是否应该有一个你有什么想法？而且由于这个元素不存在，你下一个最好的选择是什么？

来源

2010-06-18 KyleFarris

<aside>看起来合适。相关部分的电流规格粗体：

的aside元素代表一个页面包含内容是切向相关绕aside元素的内容的部分和这可以被视为独立的来自该内容。这些部分是经常代表打印排版侧边栏。

该元件可以用于像拉引号或侧边栏印刷效果，广告，用于组NAV元件，并且用于被认为是从页面的主要内容无关 其他内容。

在这种情况下，模态与引发它的动作“切线相关”。虽然您通常可能会预计旁边会出现一个侧边栏，但语义内容的目的之一是启用不受物理页面特征限制的多功能性。规范的最后一个词组似乎暗示了这种多用途的用例。

来源

2010-06-18 23:12:42 mVChr

虽然，公平地说，''或'

这实际上是我收到的最精彩的答案之一—写得很好并且很全面。不过，如果可能的话，我会等待更多的回复，然后再决定你的答案是否正确。谢谢！ – KyleFarris 2010-06-20 16:42:00

在附注上，我想我应该知道他们会用html编码我的模特......跛脚。 – KyleFarris 2010-06-20 20:14:35

HTML的当前草稿有一个dialog元素。它在一个点被删除，但它回来了。

对话框元素表示用户与交互以执行任务，例如一个对话框，检查员，或窗口的应用程序的一部分。

对于可访问性（直到元素被更广泛支持），我还将包括dialog ARIA role。

要获得在浏览器中的JavaScript API本身不支持<dialog>元素，你可以使用一个polyfill。

来源

2013-10-04 12:52:13

我觉得你和mVChr都是一个很好的观点 - 也许答案是没有一个元素来表示所有的模态。我想说这是有道理的说

3年后，支持仍然很差（http://caniuse.com/#feat=dialog），我会说它是现在更好地坚持到

@胶囊谢谢。问题的表述方式OP似乎对理论答案更感兴趣，而非实际问题。看起来大多数主流浏览器都提供了原生浏览器支持。我已经添加了一些关于如何编写今天有效的面向未来的代码的实用信息。 – 2016-06-02 21:57:05

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

回答

相关问题