HTML <dialog>

<dialog> はダイアログを表示するHTMLタグです。HTMLにおいてダイアログを表示する方法をご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。dialog 要素の終了タグは省略できない。

<dialog>
  <!-- flow content -->
</dialog>

<DIALOG>
  <!-- flow content -->
</DIALOG>

属性

以下に示す属性をdialog要素に指定できる。

accesskey

アクセスキー

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

data-*

カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScript から要素独自の属性を読み取るための仕組みである。

dir

文章が流れる方向

draggable

ドラッグ可能かどうかを列挙型で指定する。以下に示す列挙子を指定できる。

draggable

列挙子	説明
true	ドラッグ可能
false	ドラッグ不可能
空の文字列	ユーザーエージェントに任せる

ドラッグ可能なダイアログの例を以下に示す。

<dialog draggable="true" title="example" open>
  <p>draggable dialog</p>
</dialog>

draggable dialog

id

HTML文書内で一意な識別子を指定する。

lang

言語を指定する。

open

ダイアログボックスの表示の有無

<dialog open>
  <p>example</p>
</dialog>

example

dialog要素にopen属性を追加すると、ダイアログが表示される。dialog要素からopen属性を削除すると、ダイアログが非表示になる。

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<dialog style="background-color: silver; border-radius: 10px" open>
  <p>example</p>
</dialog>

example

title

ツールチップに適切な、要素のためのアドバイザリ情報を指定する。サイトや書籍の脚注や解説となる。

内容

dialog 要素の開始タグと終了タグの間にフロー・コンテンツを含めることができる。

JavaScript

JavaScriptからは HTMLDialogElement インタフェースを通じて dialog 要素へアクセスできる。

dir

dir 属性

document.querySelector("dialog").dir = "ltr";

draggable

draggable 属性

document.querySelector("dialog").draggable = false;

lang

lang 属性

document.querySelector("dialog").lang = "en";

open

open 属性

<button id="b1">Open<button>
<button id="b2">Close<button>

<dialog id="d1" open>
  <p>example</p>
</dialog>

<script>
  const openButton = document.getElementById('b1');
  const closeButton = document.getElementById('b2');
  const dialog = document.getElementById('d1');

  openButton.addEventListener('click', function(){
    dialog.setAttribute('open', 'true');
  });

  closeButton.addEventListener('click', function(){
    dialog.removeAttribute('open');
  });
</script>

Open Close

example

style

style 属性

document.querySelector("dialog").style = "color: gray";

tabIndex

tabindex 属性

document.querySelector("dialog").tabIndex = 0;

title

title 属性

document.querySelector("dialog").title = "example";

参考文献

Web Hypertext Application Technology Working Group (2023) Interactive elements HTML Living Standard

Tweet