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要素の開始タグと終了タグの間にはフロー・コンテンツを含めることができる。具体的には、以下に示す要素である。

• テキスト
• <a>
• <abbr>
• <address>
• <article>
• <aside>
• <audio>
• <b>
• <bdi>
• <bdo>
• <blockquote>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <div>
• <dl>
• <em>
• <embed>
• <fieldset>
• <figure>
• <footer>
• <form>
• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>
• <header>
• <hgroup>
• <hr>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <main>
• <map>
• <mark>
• <math>
• <menu>
• <meter>
• <nav>
• <noscript>
• <object>
• <ol>
• <output>
• <p>
• <picture>
• <pre>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <section>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <table>
• <template>
• <textarea>
• <time>
• <ul>
• <var>
• <video>
• <wbr>

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