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

}());

使用可能な属性

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

コンテンツカテゴリ

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

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

  • フローコンテンツ

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

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

仕様書と策定状況

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

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報