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

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

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

属性

この要素にはグローバル属性があります。

closedby

<dialog> 要素を閉じるために使用できるユーザー操作の種類を指定します。この属性は、ダイアログが閉じられる可能性のある 3 つの方法を区別します。

• 「簡単な解除のユーザー操作」。ユーザーがダイアログの外側をクリックまたはタップすると、<dialog> が閉じられます。これは、「自動」状態のポップオーバーにおける「簡単な解除」動作 と同等です。
• 「プラットフォーム固有のユーザー操作」。例えば、デスクトッププラットフォームではEsc キーを押す操作、モバイルプラットフォームでは「戻る」または「閉じる」ジェスチャーなど。
• 開発者が指定した機構（例：<button> にclick ハンドラーを設定し、そこでHTMLDialogElement.close() を呼び出したり、<form> を送信したりする。

利用可能な値は次の通りです。

any

ダイアログは、3 つのいずれかの方法で閉じることができます。

closerequest

ダイアログは、プラットフォーム固有のユーザー操作または開発者が指定した機構で閉じることができます。

none

このダイアログは開発者が指定した機構でのみ閉じることができます。

<dialog> 要素に有効なclosedby 値が指定されていない場合、

• showModal() を使用して開かれた場合、値が"closerequest" であるかのように動作します。
• それ以外の場合、値が"none" であるかのように動作します。

open

ダイアログボックスがアクティブであり、操作できる状態であることを示します。open が設定されていない場合、ダイアログボックスはユーザーに表示されません。ダイアログを表示するには、open 属性ではなく.show() または.showModal() メソッドを使用することが推奨されます。もし<dialog> がopen 属性を使用して開かれた場合、そのダイアログは非モーダルになります。

メモ:モーダルではないダイアログボックスの開いた状態と閉じた状態を切り替えるには、open 属性の有無を切り替えることができますが、この手法は推奨されません。詳しくはopen を参照してください。

使用上の注意

• HTML の<form> 要素は、属性method="dialog" がついている場合、またはフォームを送信するボタンにformmethod="dialog" が設定されている場合に、ダイアログボックスを閉じることができます。<dialog> 内の<form> がdialog メソッドで確定されると、ダイアログボックスが閉じられ、そのフォームコントロールの状態が保存されますが、送信はされません。また、returnValue プロパティは、押されたボタンの値に設定されます。
• CSS の::backdrop 擬似要素は、モーダルダイアログの背景をスタイル設定するために使用することができます。これは、HTMLDialogElement.showModal() メソッドを使用してダイアログを表示した際に、<dialog> 要素の背後に表示されます。例えば、この擬似要素を使用して、モーダルダイアログの背後の無効なコンテンツをぼかしたり、暗くしたり、といった方法で分かりにくくすることができます。
• autofocus 属性を、モーダルダイアログが開いた直後にユーザーが操作することが想定される要素に追加すべきです。他に即座の操作が想定される要素がない場合は、autofocus をダイアログ内の［閉じる］ボタンに追加するか、ユーザーがクリック/アクティブにして閉じることが想定される場合はダイアログ自体に追加することをお勧めします。
• <dialog> 要素にtabindex プロパティを追加しないでください。この要素は操作対象ではなく、フォーカスを受け取らないからです。ダイアログの内容は（ダイアログに含まれない閉じるボタンを含め）、フォーカスを受け取ることができ、操作対象となります。

アクセシビリティ

ダイアログを実装する際には、ユーザーのフォーカスを設定する場所として最も適切な場所を検討することが重要です。HTMLDialogElement.showModal() を用いて<dialog> を開いたとき、フォーカスは内部で最初のフォーカス可能な要素に設定されます。autofocus 属性を使用して初期フォーカスの配置を明確に示すと、特定のダイアログに対して最適な初期フォーカスの配置とみなされる要素に初期フォーカスが設定するのに役立ちます。ダイアログの初期フォーカスがどこに設定されるか常にわからない場合、特にダイアログのコンテンツが呼び出されたときに動的に描画される場合、必要であれば<dialog> 要素そのものにフォーカスを当てることが、初期フォーカスの配置として最適と判断されるかもしれません。

ユーザーがダイアログを閉じることができる機構を確実に用意してください。すべてのユーザーが確実にダイアログを閉じることができるようにする最も確実な方法は、閉じるための明確なボタンを記載することです。例えば、確認、キャンセル、閉じるなどのボタンが適切です。

既定では、showModal() メソッドによって呼び出されたダイアログは、Esc によって閉じることができます。非モーダルダイアログでは、既定ではEsc キーで閉じませんし、非モーダルダイアログが表すものによっては、この動作が望ましくない場合があります。キーボードの利用者は、Esc キーでモーダルダイアログを閉じることを期待します。この動作が実装され、維持されていることを確認してください。複数のモーダルダイアログが開いている場合、Esc は最後に示されたダイアログのみを閉じるようにします。<dialog> を使用した場合、この動作はブラウザーによって提供されます。

ダイアログは他の要素を使用して作成することができますが、ネイティブの<dialog> 要素は、同様の目的で他の要素を使用する場合は再現しなければならないユーザビリティとアクセシビリティ機能を提供します。独自のダイアログ実装を作成する場合は、すべての期待される既定の動作に対応しており、適切なラベル付けの推奨事項に従うことを保証してください。

<dialog> 要素は、ARIA のrole="dialog" 属性を使用した独自ダイアログと同じような形で、ブラウザーが提供します。<dialog> 要素がshowModal() メソッドで呼び出された場合、暗黙のうちにaria-modal="true" となり、一方<dialog> がshow() メソッド、またはopen 属性を使用して表示されたり<dialog> の既定のdisplay を変更した場合は[aria-modal="false"] として表示されます。モーダルダイアログを実装する際には、<dialog> とそのコンテンツ以外はinert 属性を使って不活性化する必要があります。<dialog> をHTMLDialogElement.showModal() メソッドで使用した場合、この動作はブラウザーが提供します。

例

HTML のみのダイアログ

この例は、HTML のみを使用して、モーダルではないダイアログの作成方法を示しています。論理属性open が<dialog> 要素にあるため、ページが読み込まれるとダイアログが開いた状態で表示されます。<form> 要素のmethod 属性が"dialog" に設定されているため、ダイアログは［OK］ボタンをクリックすることで閉じることができます。 この場合、フォームを閉じるために JavaScript は必要ありません。

<dialog open>  <p>Greetings, one and all!</p>  <form method="dialog">    <button>OK</button>  </form></dialog>

結果

このダイアログは、open 属性が存在するため最初に開かれます。open 属性を使用して表示されるダイアログは、モーダルではありません。［OK］をクリックすると、ダイアログは閉じられ、結果フレームは空になります。ダイアログが閉じられた後、それを再度開くための方法は提供されていません。このため、モーダルではないダイアログを表示するには、HTMLDialogElement.show() メソッドを使用するのが推奨されます。論理属性であるopen を追加または削除することで、ダイアログの表示を切り替えることも可能ですが、推奨される方法ではありません。

モーダルダイアログの作成

この例では、グラデーションの背景を持つモーダルダイアログを示しています。.showModal() メソッドは、［ダイアログを表示］ボタンが押された際に、モーダルダイアログを開くためのものです。ダイアログは、Esc キーを押すか、ダイアログ内の［閉じる］ボタンが押された際にclose() メソッドを使用することで閉じることができます。

ダイアログが開くと、既定では、ブラウザーはダイアログ内でフォーカス可能な最初の要素にフォーカスを当てます。この例では、autofocus 属性が［閉じる］ボタンに適用されており、このボタンにダイアログが開いたときにフォーカスが当たります。これは、ダイアログが開いた直後にユーザーが対話すると想定される要素だからです。

HTML

<dialog>  <button autofocus>閉じる</button>  <p>このモーダルダイアログの背景はクールです！</p></dialog><button>ダイアログを表示</button>

CSS

ダイアログの背景は、::backdrop 擬似要素を使用してスタイル設定することができます。

::backdrop {  background-image: linear-gradient(    45deg,    magenta,    rebeccapurple,    dodgerblue,    green  );  opacity: 0.75;}

JavaScript

ダイアログは、.showModal() メソッドを使用してモーダルに開かれ、.close() または.requestClose() メソッドを使用して閉じられます。

const dialog = document.querySelector("dialog");const showButton = document.querySelector("dialog + button");const closeButton = document.querySelector("dialog button");// ［ダイアログを表示］ボタンでダイアログがモーダルに開くshowButton.addEventListener("click", () => {  dialog.showModal();});// ［閉じる］ボタンでダイアログを閉じるcloseButton.addEventListener("click", () => {  dialog.close();});

結果

モーダルダイアログが表示されると、存在する他のダイアログの上に表示されます。モーダルダイアログの外側にあるものはすべて無効となり、ダイアログ外での操作はブロックされます。ダイアログが開いている間は、ダイアログ自体を除いて、文書内の操作は不可能であることに注意してください。［ダイアログを表示］ボタンは、ほとんど不透明なダイアログの背景によってほとんど隠されてしまい、無効となります。

ダイアログからの返値を扱い

この例では、<dialog> 要素のreturnValue と、フォームを使用してモーダルダイアログを閉じる方法を示しています。 既定では、returnValue は空文字列、または<dialog> 要素内にフォームを送信するボタンがある場合はその値となります。

この例では、［ダイアログを表示］ボタンが押されるとモーダルダイアログが開きます。ダイアログには、<select> と 2 つの<button> 要素という形でフォームが含まれており、既定ではtype="submit" となっています。イベントリスナーは、選択オプションが変更された際に［確認］ボタンの値を更新します。［確認］ボタンがダイアログを閉じるために有効化された場合、ボタンの現在の値が返値となります。［キャンセル］ボタンが押されてダイアログが閉じられた場合、returnValue はcancel となります。

ダイアログが閉じられると、返値が［ダイアログを表示］ボタンの下に表示されます。Esc キーを押してダイアログが閉じられた場合、returnValue は更新されず、close イベントも発生しないため、<output> 内のテキストは更新されません。

HTML

<!-- フォームのあるモーダルダイアログ --><dialog>  <form>    <p>      <label>        好きな動物は？        <select>          <option value="default">選択してください…</option>          <option>ブラインシュリンプ</option>          <option>レッサーパンダ</option>          <option>クモザル</option>        </select>      </label>    </p>    <div>      <button value="cancel" formmethod="dialog">キャンセル</button>      <button value="default">確認</button>    </div>  </form></dialog><p>  <button>ダイアログを表示</button></p><output></output>

JavaScript

const showButton = document.getElementById("showDialog");const favDialog = document.getElementById("favDialog");const outputBox = document.querySelector("output");const selectEl = favDialog.querySelector("select");const confirmBtn = favDialog.querySelector("#confirmBtn");// "Show the dialog" ボタンで <dialog> をモーダルに開くshowButton.addEventListener("click", () => {  favDialog.showModal();});// "Cancel" ボタンで [formmethod="dialog"] による送信を行わずにダイアログを閉じ、close イベントを発行するfavDialog.addEventListener("close", (e) => {  outputBox.value =    favDialog.returnValue === "default"      ? "No return value."      : `ReturnValue: ${favDialog.returnValue}`; // 空文字列ではなく、既定値かどうかを調べる必要がある});// ［確認］ボタンが既定でフォームを送信しないようにし、`close()` メソッドでダイアログを閉じ、"close" イベントを発生させるconfirmBtn.addEventListener("click", (event) => {  event.preventDefault(); // この偽フォームを送信しない  favDialog.close(selectEl.value); // ここで選択ボックスの値を送る必要がある});

結果

上記の例では、上記の例は、モーダルダイアログを閉じる次の 3 つのメソッドを示しています。

• ダイアログフォーム内のフォームを、dialog メソッドを使用して確定することによって（例えば、HTML のみの例を参照）。
• Esc キーを押すことよって。
• HTMLDialogElement.close() メソッドを呼び出すことによって（モーダルの例にあるように）。この例では、［キャンセル］ボタンはダイアログフォームメソッドを介してダイアログを閉じ、［確認］ボタンはHTMLDialogElement.close() メソッドを介してダイアログを閉じます。

［キャンセル］ボタンにはformmethod="dialog" が含まれており、<form> の既定のGET メソッドを上書きします。フォームのメソッドがdialog の場合、フォームの状態は送信されずに保存され、ダイアログは閉じられます。

action がない場合、既定のGET メソッドでフォームを送信すると、ページの再読み込みが発生します。JavaScript を使用して、送信を阻止し、ダイアログを閉じるために、それぞれevent.preventDefault() とHTMLDialogElement.close() メソッドを使用しています。

すべてのdialog 要素で閉じるための仕組みを提供することが重要です。既定では、非モーダルのダイアログはEsc キーでは閉じませんし、ユーザーが物理キーボードにアクセスすることも想定してはいけません（たとえば、キーボードにアクセスできないタッチ画面端末を使用している人もいます）。

必須フォーム入力付きのダイアログを閉じる

ダイアログ内のフォームに必須入力項目がある場合、ユーザーエージェントは、必須入力項目に値が入力されるまで、ダイアログを閉じることができません。このようなダイアログを閉じるには、［閉じる］ボタンにformnovalidate 属性を使用するか、［閉じる］ボタンがクリックされたときにダイアログオブジェクトのclose() メソッドを呼び出すかしてください。

<dialog>  <form method="dialog">    <p>      <label>        好きな動物は？        <input type="text" required />      </label>    </p>    <div>      <input type="submit" value="通常 閉じる" />      <input        type="submit"               value="無検証 閉じる"        formnovalidate />      <input type="submit" value="JS 閉じる" />    </div>  </form></dialog><p>  <button>ダイアログを表示</button></p><output></output>

[type="submit"] {  margin-right: 1rem;}

JavaScript

const showBtn = document.getElementById("show-dialog");const dialog = document.getElementById("dialog");const jsCloseBtn = dialog.querySelector("#js-close");showBtn.addEventListener("click", () => {  dialog.showModal();});jsCloseBtn.addEventListener("click", (e) => {  e.preventDefault();  dialog.close();});

結果

出力から、［通常 閉じる］ボタンを使用してダイアログを閉じることができないことが分かります。しかし、［無検証 閉じる］ボタンのformnovalidate 属性を使用してフォームの検証をバイパスすれば、ダイアログを閉じることができます。プログラム上では、dialog.close() を使用しても同様にダイアログを閉じることができます。

様々な closedby 動作の比較

この例は、closedby属性の様々な値による動作の違いを示しています。

HTML

3 つの<button> 要素と 3 つの<dialog> 要素があります。各ボタンは、closedby 属性の 3 つの値（none、closerequest、any）のいずれかの動作を示す異なるダイアログを開くようにプログラムされています。各<dialog> 要素には、それを閉じるために使用される<button> 要素が含まれていることに注意してください。

<p>表示する <code>&lt;dialog&gt;</code> の種類を選択:</p><div>  <button><code>closedby="none"</code></button>  <button>    <code>closedby="closerequest"</code>  </button>  <button><code>closedby="any"</code></button></div><dialog closedby="none">  <h2><code>closedby="none"</code></h2>  <p>    特定の提供された機構を操作することによってのみ閉じることが可能です。    この場合は、下部の「閉じる」ボタンを押してください。  </p>  <button>閉じる</button></dialog><dialog closedby="closerequest">  <h2><code>closedby="closerequest"</code></h2>  <p>「閉じる」ボタンまたは Esc キーで閉じられます。</p>  <button>閉じる</button></dialog><dialog closedby="any">  <h2><code>closedby="any"</code></h2>  <p>    「閉じる」ボタン、Esc キー、またはダイアログの外側をクリックすることで閉じられます。「簡単な解除」の動作です。  </p>  <button>閉じる</button></dialog>

body {  font-family: sans-serif;}#controls {  display: flex;  justify-content: space-around;}dialog {  width: 480px;  border-radius: 5px;  border-color: rgb(0 0 0 / 0.3);}dialog h2 {  margin: 0;}dialog p {  line-height: 1.4;}

JavaScript

ここでは、メインコントロールの<button> 要素、<dialog> 要素、ダイアログ内の「閉じる」の<button> 要素を参照するために、異なる変数を割り当てます。まずclick イベントリスナーをaddEventListener で各コントロールボタンに割り当て、そのイベントハンドラー関数で関連する<dialog> 要素をshowModal() で開くようにします。 次に「閉じる」の<button> 要素をループ処理し、それぞれにclick イベントハンドラー関数を割り当てます。この関数は対応する<dialog> 要素を、close() で閉じます。

const noneBtn = document.getElementById("none-btn");const closerequestBtn = document.getElementById("closerequest-btn");const anyBtn = document.getElementById("any-btn");const noneDialog = document.querySelector("[closedby='none']");const closerequestDialog = document.querySelector("[closedby='closerequest']");const anyDialog = document.querySelector("[closedby='any']");const closeBtns = document.querySelectorAll(".close");noneBtn.addEventListener("click", () => {  noneDialog.showModal();});closerequestBtn.addEventListener("click", () => {  closerequestDialog.showModal();});anyBtn.addEventListener("click", () => {  anyDialog.showModal();});closeBtns.forEach((btn) => {  btn.addEventListener("click", () => {    btn.parentElement.close();  });});

結果

レンダリング結果は次のとおりです。

各ボタンをクリックしてダイアログを開いてみてください。最初のダイアログは「閉じる」ボタンをクリックすることでのみ閉じられます。2 つ目のダイアログは、Esc キーを押すなど、端末固有のユーザー操作でも閉じられます。3つ目のダイアログは完全な「簡単な解除」動作を備えているため、ダイアログの外側をクリックまたはタップしても閉じられます。

アニメーションするダイアログ

<dialog> 要素は、非表示時にはdisplay: none; 表示時にはdisplay: block; と設定され、最上位レイヤーおよびアクセシビリティツリーから削除されたり、追加されたりします。したがって、<dialog> 要素をアニメーションさせるには、display プロパティをアニメーション化する必要があります。対応ブラウザーでは、display プロパティを離散的なアニメーション型で変化させてアニメーション化します。具体的には、ブラウザーはnone と他のdisplay 値を交互に切り替えることで、アニメーション化されたコンテンツがアニメーションの全期間にわたって表示されるようにします。

例えば、

• display をnone からblock（あるいは他の可視のdisplay 値）にアニメーションする場合、アニメーション再生時間の0% で値がblock に切り替わり、常に表示されます。
• display のblock（または他の可視のdisplay 値）からnone へのアニメーションでは、アニメーション再生時間の100% の時点で値がnone に切り替わるため、全体を通して表示されます。

dialog 要素のトランジション

CSS トランジションで<dialog> をアニメーションさせる場合、以下の機能が要求されます。

@starting-style アットルール

<dialog> に設定されたプロパティの、開かれるたびにトランジションする開始値のセットを提供します。これは予期せぬ動作を避けるために必要です。既定では、CSS トランジションは、可視要素のプロパティが 1 つの値から別の値に変更された場合のみ発生します。要素の最初のスタイル更新時や、display の型がnone から別の型に変更された場合には発生しません。

display プロパティ

トランジションのリストにdisplay を追加すると、トランジションの再生時間中、<dialog> がdisplay: block（またはダイアログが開いている状態として設定されている他の可視display 値）のままになり、他にもトランジションが確実に表示されます。

overlay プロパティ

トランジションのリストにoverlay が含まれていると、最上位レイヤーから<dialog> が確実に除去されるまでトランジションが完了するまで遅延され、トランジションが確実に表示されるようになります。

transition-behavior プロパティ

transition-behavior: allow-discrete をdisplay とoverlay トランジション（またはtransition 一括指定）に設定すると、既定ではアニメーションできないこれら2つのプロパティで離散トランジションが有効になります。

この機能がどのようなものか見ていくために、例えば次のような例を挙げてみましょう。

HTML

この HTML は<dialog> 要素と、ダイアログを表示させるためのボタンを格納しています。さらに、<dialog> 要素には、それ自体を閉じさせるためのボタンがもう一つ格納されています。

<dialog>  ここがコンテンツ  <button>閉じる</button></dialog><button>モーダル表示</button>

CSS

この CSS では、@starting-style ブロックを記述して、opacity およびtransform プロパティのトランジション開始時のスタイル、dialog:open 状態のトランジション終了時のスタイル、<dialog> が表示された後に元の状態に戻る際の既定のdialog 状態のスタイルを定義します。注意してほしいのは、<dialog> のtransition リストには、これらのプロパティだけでなく、display とoverlay プロパティも含まれ、それぞれにallow-discrete が設定されていることです。

また、開いたときに現れる<dialog> の背後に現れる::backdrop のbackground-color プロパティに開始時のスタイル値を設定し、素敵な暗転アニメーションを指定しました。dialog:open::backdrop セレクターは、ダイアログが開いているときに、<dialog> 要素の背景のみを選択します。

/* 開いた状態のダイアログ */dialog:open {  opacity: 1;  transform: scaleY(1);}/* 閉じた状態のダイアログ */dialog {  opacity: 0;  transform: scaleY(0);  transition:    opacity 0.7s ease-out,    transform 0.7s ease-out,    overlay 0.7s ease-out allow-discrete,    display 0.7s ease-out allow-discrete;  /* transition: all 0.7s allow-discrete;  と等しい*/}/* 開く前の状態 *//* 詳細度が同じであるため、前の dialog:open ルールの後に置かなければ効果がありません */@starting-style {  dialog:open {    opacity: 0;    transform: scaleY(0);  }}/* ダイアログがモーダルで最上位に来た場合に :backdrop をトランジションする */dialog::backdrop {  background-color: transparent;  transition:    display 0.7s allow-discrete,    overlay 0.7s allow-discrete,    background-color 0.7s;  /* transition: all 0.7s allow-discrete;  と等しい */}dialog:open::backdrop {  background-color: rgb(0 0 0 / 25%);}/* この開始スタイル設定ルールは、上記のセレクター内にネストすることができません。入れ子セレクターは擬似要素を表すことができないからです。 */@starting-style {  dialog:open::backdrop {    background-color: transparent;  }}

JavaScript

JavaScript で、表示ボタンと閉じるボタンにイベントハンドラーを追加し、クリックされたときに<dialog> を表示させたり閉じたりするイベントを発生させます。

const dialogElem = document.getElementById("dialog");const showBtn = document.querySelector(".show");const closeBtn = document.querySelector(".close");showBtn.addEventListener("click", () => {  dialogElem.showModal();});closeBtn.addEventListener("click", () => {  dialogElem.close();});

結果

このコードは次のように表示されます。

dialog のキーフレームアニメーション

CSS のキーフレームアニメーションで<dialog> をアニメーションさせる場合、トランジションとのいくつかの違いに注意する必要があります。

• @starting-style は提供しません。
• キーフレームにはdisplay を記載します。これはアニメーション全体、または別のnone 以外の表示値が指定されるまでの表示値となります。
• 離散アニメーションを明示的に有効にする必要はありません。キーフレーム内にallow-discrete に相当するものはありません。
• また、キーフレーム内でoverlay を設定する必要もありません。display のアニメーションが<dialog> の表示から非表示へのアニメーションを処理します。

この例を見て、どのようなものか見ていきましょう。

HTML

最初の HTML には、<dialog> 要素と、ダイアログを表示させるためのボタンがあります。さらに、<dialog> 要素には、それ自体を閉じるためのボタンが格納されています。

<dialog>  ここがコンテンツです  <button>閉じる</button></dialog><button>モーダル表示</button>

CSS

CSSでは、<dialog>を閉じられた状態と表示させた状態の間でアニメーションさせるためのキーフレームを定義し、さらに、<dialog>の背景のフェードインアニメーションも定義しています。ダイアログボックスのアニメーションには、実際のアニメーション効果が再生時間全体にわたって確実に表示されるようにするためのdisplay のアニメーションが含まれます。 バックグラウンドのフェードアウトのアニメーションは不可能であることに注意してください。背景は、ダイアログボックスが閉じられるとすぐに DOM から除去されるため、アニメーション化する何かがあるわけではありません。

dialog {  animation: fade-out 0.7s ease-out;}dialog:open {  animation: fade-in 0.7s ease-out;}dialog:open::backdrop {  background-color: black;  animation: backdrop-fade-in 0.7s ease-out forwards;}/* アニメーションのキーフレーム */@keyframes fade-in {  0% {    opacity: 0;    transform: scaleY(0);    display: none;  }  100% {    opacity: 1;    transform: scaleY(1);    display: block;  }}@keyframes fade-out {  0% {    opacity: 1;    transform: scaleY(1);    display: block;  }  100% {    opacity: 0;    transform: scaleY(0);    display: none;  }}@keyframes backdrop-fade-in {  0% {    opacity: 0;  }  100% {    opacity: 0.25;  }}body,button {  font-family: system-ui;}

JavaScript

最後に、JavaScript でボタンにイベントハンドラーを追加し、<dialog> を表示させたり閉じたりできるようにします。

const dialogElem = document.getElementById("dialog");const showBtn = document.querySelector(".show");const closeBtn = document.querySelector(".close");showBtn.addEventListener("click", () => {  dialogElem.showModal();});closeBtn.addEventListener("click", () => {  dialogElem.close();});

結果

このコードは次のように表示されます。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• HTMLDialogElement インターフェイス
• close イベント（HTMLDialogElement インターフェイス）
• cancel イベント（HTMLDialogElement インターフェイス）
• open プロパティ（HTMLDialogElement インターフェイス）
• inert グローバル属性（HTML 要素）
• CSS の::backdrop 擬似要素
• ウェブフォーム（学習領域）