Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<dialog>

<dialog> は HTML の要素で、モーダルまたは非モーダルダイアログボックスや、それ以外の消すことができるアラート、インスペクター、サブウィンドウなどのような対話的コンポーネントを表します。

HTML の <dialog> 要素は、モーダルダイアログボックスと非モーダルダイアログボックスのどちらを作成する時にも使用します。モーダルダイアログボックスは、ページの他の部分との操作を中断し、非モーダルダイアログボックスは、ページの他の部分との操作を許可します。

<dialog> 要素を表示するには、JavaScript を使用して下さい。モーダルダイアログを表示するには .showModal() メソッドを、非モーダルダイアログを表示するには .show() メソッドを使用して下さい。ダイアログボックスは .close() メソッドを使用するか、または <dialog> 要素内に含まれる <form> フォームを送信する際に dialog メソッドを使用して閉じることができます。モーダルダイアログは、Esc キーを押すことでも閉じることができます。

テキスト・構造

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`<dialog>`	37	79	98	15.4	37	15.4
HTML 属性
`open`	37	79	98	15.4	37	15.4
DOM API
`HTMLDialogElement` HTMLDialogElement インターフェイスは dialog 要素を操作するメソッドを提供します。 HTMLElement インターフェイスからプロパティとメソッドを継承しています。	37	79	98	15.4	37	15.4
`cancel_event` cancel は dialog 要素で発生するイベントで、ユーザーがブラウザーに対して現在のダイアログを閉じるよう指示した際に発行されます。ブラウザーは、ユーザーが Esc キーを押したときにこのイベントを発行します。	37	79	98	15.4	37	15.4
`close` close() は HTMLDialogElement インターフェイスのメソッドで、このダイアログ (dialog) を閉じます。引数としてオプションの文字列を渡すことができ、このダイアログの returnValue を更新します。	37	79	98	15.4	37	15.4
`close_event` close イベントは HTMLDialogElement オブジェクト上で、これが表すダイアログ (dialog) が閉じられたときに発生します。	37	79	98	15.4	37	15.4
`open` open は HTMLDialogElement インターフェイスのプロパティで、HTML の open 属性を反映した論理値です。これは dialog が操作できる状態であるかどうかを示します。	37	79	98	15.4	37	15.4
`returnValue` returnValue は HTMLDialogElement インターフェイスのプロパティで、dialog 要素が閉じたときの返値を表す文字列です。値を直接設定したり (dialog.returnValue = "result")、 HTMLDialogElement.close() や HTMLDialogElement.requestClose() に文字列引数として提供する形設定したりすることができます。	37	79	98	15.4	37	15.4
`show` show() は HTMLDialogElement インターフェイスのメソッドで、ダイアログをモードレスに表示します。すなわち、ダイアログの外側のコンテンツも操作できる状態にします。	37	79	98	15.4	37	15.4
`showModal` showModal() は HTMLDialogElement インターフェイスのメソッドで、ダイアログをモーダルに、見えるように他のダイアログの最も上に表示します。これは top layer の中に ::backdrop 擬似要素とともに表示されます。ダイアログおよびその子要素を除く、ダイアログと同じ文書内の要素は不活性状態となります（inert 属性が指定された場合と同様）。ブロック状態になるのは包含文書のみです。ダイアログが iframe 内でレンダリングされている場合、ページの残りの部分は操作可能な状態を維持します。	37	79	98	15.4	37	15.4
`beforetoggle_event (dialog elements)` beforetoggle`イベントがダイアログ要素で発生する	132	132	133	26	132	26
`toggle_event (dialog elements)` ダイアログ要素で `toggle` イベントが発生する	132	132	133	26	132	26

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

HTML

<dialog id="myDialog">
  <h2>Confirm</h2>
  <p>Do you want to proceed?</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="ok">OK</button>
  </form>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open dialog</button>

ライブデモ

confirmdialog

Closepattern. with modaldialog display, form method="dialog". with showModal()

プレビュー全画面表示

Inputform withdialog

dialoginsideformelement placement, yu-za-input pattern.

プレビュー全画面表示

non-modaldialog

non-modaldisplay.background. operation that block, notificationbana- etc to usage. with show()

プレビュー全画面表示

実務での使いどころ

<dialog> の活用

<dialog> は HTML の要素で、モーダルまたは非モーダルダイアログボックスや、それ以外の消すことができるアラート、インスペクター、サブウィンドウなどのような対話的コンポーネントを表します。

注意点

古いブラウザでは対応していない場合がある。

対応ブラウザ

基本構文

ライブデモ

confirmdialog

Inputform withdialog

non-modaldialog

実務での使いどころ

<dialog> の活用

注意点

アクセシビリティ

参考リンク