ダイアログとは

はい・いいえなど、その場での判断をユーザーに求める小さなウィンドウ。ブラウザ標準の dialog 要素で実装できる。

概要

「削除しますか？」「保存しますか？」のように、ユーザーにその場で判断してもらいたいときに表示する小さなウィンドウです。 HTML には <dialog> という専用の要素があり、showModal() というメソッドを呼ぶだけで、背景の暗転や操作のブロックをブラウザが自動でやってくれます。

別名

表記ゆれ：ダイアログボックス、確認ダイアログ、アラートダイアログ、dialog

「アラートダイアログ」はブラウザ標準の alert() を指すこともありますが、Web デザインの現場では見た目を自由に作れる <dialog> ベースの実装を指すことが多い言葉です。

AI への伝え方

「確認ダイアログを出して」「削除前にダイアログで確認して」で通じます。 <dialog> 要素と showModal() を使ってほしいか、独自のオーバーレイ div で実装してほしいかを伝えると仕様がぶれません。

似たパーツとの違い

「モーダル」とはほぼ同じ意味で使われますが、モーダルは独自のオーバーレイ div で実装されることが多いのに対し、ダイアログはブラウザ標準の <dialog> 要素を指すことが多い言葉です。「ポップアップ」は背景を暗転させずに軽い情報を出すのに対し、ダイアログは背景を暗転させて操作をブロックします。「トースト」は数秒で自動的に消える通知で判断を求めないのに対し、ダイアログはユーザーが選択するまで表示され続けます。

デモ

コード

HTML

<div class="dialog-demo">
  <button class="dialog-demo__open" type="button" data-dialog-open>
    ダイアログを開く
  </button>

  <dialog class="dialog-demo__dialog">
    <form method="dialog" class="dialog-demo__form">
      <h2 class="dialog-demo__title">ページを削除しますか？</h2>
      <p class="dialog-demo__text">この操作は取り消せません。</p>
      <div class="dialog-demo__actions">
        <button class="dialog-demo__cancel" type="submit" value="cancel">キャンセル</button>
        <button class="dialog-demo__confirm" type="submit" value="confirm">削除する</button>
      </div>
    </form>
  </dialog>
</div>

CSS

.dialog-demo {
  font-family: sans-serif;
}

.dialog-demo__open {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #0017c1;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.dialog-demo__open:hover {
  background: #00118f;
}

.dialog-demo__dialog {
  width: 100%;
  max-width: 320px;
  border: 0;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* dialog の背景幕(ブラウザ標準の要素) */
.dialog-demo__dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.dialog-demo__form {
  padding: 20px;
}

.dialog-demo__title {
  margin: 0 0 8px;
  font-size: 17px;
}

.dialog-demo__text {
  margin: 0 0 20px;
  font-size: 14px;
  color: #333;
}

.dialog-demo__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dialog-demo__cancel,
.dialog-demo__confirm {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

.dialog-demo__cancel {
  border: 1px solid #999;
  background: #fff;
}

.dialog-demo__confirm {
  border: 0;
  background: #0017c1;
  color: #fff;
}

const dialog = document.querySelector(".dialog-demo__dialog");

document.querySelector("[data-dialog-open]").addEventListener("click", () => {
  dialog.showModal();
});