32

私の仲間のWeb開発者/デザイナーの何人かが、ライトボックス、スーパーボックス、シックボックス、またはお気に入りのフレーバーが何であれ、モーダルダイアログに使用するのに最適なHTML5要素であると感じたのではないかと思いました。

これらのタイプのUIは、「通常の」Webページの一般的なフロー(HTML 5の仕様によると、基本的にはブログです)に従わないため、実際には、、、のように配置されませ<header><nav><section>、、、<article>または<footer>(他の新しい「セマンティック」要素の中で)可能性があります。

もちろん、常にあります<div>が、私はちょっと意味的に正確な何かがあるかもしれないと思っていました。

残念ながら、<modal>要素はありません。スペックにあるべきかどうかについてどう思いますか?そして、その要素が存在しないので、あなたの次善の選択は何でしょうか?

4

2 に答える 2

33

<aside>適切なようです。関連セクションを太字にした現在の仕様:

aside 要素は、aside 要素の周囲のコンテンツに接線方向に関連し、そのコンテンツとは別のものと見なすことができるコンテンツで構成されるページのセクションを表します。このようなセクションは、多くの場合、印刷されたタイポグラフィではサイドバーとして表されます。

この要素は、プル クォートやサイドバーなどのタイポグラフィ効果、広告、ナビゲーション要素のグループ、およびページのメイン コンテンツとは別のものと見なされるその他のコンテンツに使用できます。

この場合、モーダルはそれを引き起こしたアクションに「接線方向に関連」しています。サイドバーにサイドバーがあることを通常期待するかもしれませんが、セマンティック コンテンツの目的の 1 つは、物理的なページの特性に制限されない汎用性を実現することです。仕様の最後のフレーズは、まさにこの用途の広いユース ケースを暗示しているようです。

于 2010-06-18T23:12:42.983 に答える
21

HTML の現在のドラフトには、ダイアログ要素があります。一時は削除されていましたが、復活し、ブラウザでの実装が開始されています。

ダイアログ要素は、ダイアログ ボックス、インスペクター、ウィンドウなど、ユーザーがタスクを実行するために対話するアプリケーションの一部を表します。

アクセシビリティのために (要素がより広くサポートされるまで)、 dialog ARIA roleも含めます。

<dialog>要素をネイティブにサポートしていないブラウザーで JavaScript API を取得するには、 polyfillを使用できます。

于 2013-10-04T12:52:13.447 に答える