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>

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

このエントリーをはてなブックマークに追加