dialog要素

dialog要素はHTML5.2から新たに追加された要素です。

ダイアログボックス、モーダルウィンドウとして機能します。

open属性をつけはずしすることで表示非表示を切り替えることができ、DOMインターフェースにつけはずしを行う専用メソッドも用意されています。

使用例

<dialog id="sample">
	<button id="close">閉じる</button>
</dialog>

<script>
	(function () {
		'use strict';

		var dialog = document.getElementById('sample');

		var openBtn = document.getElementById('open');

		var closeBtn = document.getElementById('close');

		var open = function () {
			dialog.showModal();
		};

		var close = function () {
			dialog.close();
		};

		openBtn.addEventListener('click', open);

		closeBtn.addEventListener('click', close);
	})();
</script>

使用可能な属性

• 全てのグローバル属性
• open属性

コンテンツカテゴリ

• フローコンテンツ
• セクショニングルート

子要素にしていい要素の種類

• フローコンテンツ

親要素にしていい要素の種類

• フローコンテンツが期待されているすべての要素

仕様書と策定状況