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属性

コンテンツカテゴリ

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

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

• フローコンテンツ

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

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

仕様書と策定状況