文書の骨格

`<dialog>` ダイアログ（モーダル）を表示する

重要度3 / 5

意味

確認や入力を求める小さな画面を、ページの上に重ねて表示する場合に使います。JavaScriptの showModal() で開くと、背面の操作が止まり、Escキーで閉じられます。フォームに method="dialog" を付けると、送信ボタンで閉じられます。

コード

HTML

<button type="button" onclick="document.getElementById('send-dialog').showModal()">確認する</button>
<dialog id="send-dialog">
  <p>この内容で送信しますか？</p>
  <form method="dialog">
    <button value="cancel">戻る</button>
    <button value="ok">送信する</button>
  </form>
</dialog>

プレビュー（初期表示）

ブラウザ対応

主要ブラウザの対応状況
ブラウザ	対応
Chrome	37〜
Firefox	98〜
Safari	15.4〜
Edge	79〜
Chrome Android	37〜
Safari iOS	15.4〜

出典: MDN Web Docs（`@mdn/browser-compat-data`）