Smart Communication Design Company
ホーム > ナレッジ > 用語集 > Web制作用語集 > HTML用語集 > dialog要素

dialog要素

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

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

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

使用例

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

(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);
}());

使用可能な属性

コンテンツカテゴリ

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

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

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2018年1月19日