<dialog> - ダイアログ

• トップ
• HTMLリファレンス
• <dialog>

• 概要
• 説明
• 属性
• 使用例
• リンク

概要

形式

<dialog>～</dialog>

サポート

https://caniuse.com/dialog

カテゴリ

フローコンテンツ

セクショニングルート

親要素

フローコンテンツ を子要素に持てるもの

子要素

フローコンテンツ

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

open

closedby

説明

<dialog> はダイアログを表示します。JavaScript でダイアログの表示・クローズを制御することが可能です。show() は通常モードでダイアログを表示します。showModal() はモーダル状態(ダイアログ以外の操作が禁止される)でダイアログを開きます。close() はダイアログを閉じます。close() の引数は、ダイアログの onclose イベントハンドラの this.returnValue で参照することができます。

HTML Living Standard、HTML 5.2 で追加され、Chrome 37、Opera 24 以降でサポートされています。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

open

LS/H5.2

最初にダイアログを表示した状態で開きます。

closedby

LS

ダイアログを閉じる方法を指定します。2025年3月の Chrome 134 でサポートされました。(サポート状況)

• any : close()呼び出し時、ESC押下時、ダイアログの外側クリック時にダイアログを閉じます。
• closerequest : close()呼び出し時、ESC押下時にダイアログを閉じます。
• none : close()呼び出し時にダイアログを閉じます。

使用例

基本的なサンプル

<input type="button" value="Show" onclick="document.getElementById('dg1').show()">
<input type="button" value="ShowModal" onclick="document.getElementById('dg1').showModal()">
<dialog id="dg1">
  <p>Hello!</p>
  <input type="button" value="Close" onclick="document.getElementById('dg1').close()">
</dialog>

ダイアログに入力した値を受け取る

ダイアログに入力した値を受け取るには、下記の様に close() の引数で値を渡し、これを e.target.returnValue で受け取ります。

<script>
window.addEventListener('load', function() {
  var dialog2 = document.getElementById('dialog2');
  var open2 = document.getElementById('open2');
  var text2 = document.getElementById('text2');
  var close2 = document.getElementById('close2');
  open2.addEventListener('click', () => {
    dialog2.showModal();
  });
  close2.addEventListener('click', () => {
    dialog2.close(text2.value);
  });
  dialog2.addEventListener('close', (e) => {
    alert(e.target.returnValue);
  });
});
</script>
<input type="button" id="open2" value="Open">
<dialog id="dialog2">
  <input type="text" id="text2" value="Hello">
  <input type="button" id="close2" value="Close">
</dialog>

closedby属性の使い方

2025年3月の Chrome 134 で closedby 属性がサポートされました。

<dialog id="dlg-any" closedby="any">
  <p>Any dialog</p>
  <button class="close3">Close</button>
</dialog>
<dialog id="dlg-closerequest" closedby="closerequest">
  <p>CloseRequest Dialog</p>
  <button class="close3">Close</button>
</dialog>
<dialog id="dlg-none" closedby="none">
  <p>None Dialog</p>
  <button class="close3">Close</button>
</dialog>
<button type="button" class="btn3" data-target="dlg-any">any</button>
<button type="button" class="btn3" data-target="dlg-closerequest">closerequest</button>
<button type="button" class="btn3" data-target="dlg-none">none</button>

document.querySelectorAll(".btn3").forEach((e) => {
  e.addEventListener("click", (e) => {
    document.getElementById(e.target.getAttribute("data-target")).showModal();
  });
});
document.querySelectorAll(".close3").forEach((e) => {
  e.addEventListener("click", (e) => {
    console.log(e.target.parentElement);
    e.target.parentElement.close();
  });
});

リンク

• https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog
• https://caniuse.com/dialog

---