HTMLのdialog要素でモーダルを作る方法【showModal・backdrop・閉じる処理】

<main class="demo-card">
  <img class="nines-logo" src="https://kjnine.com/wp-content/themes/kjnines_theme/images/svg2/nines_logo.svg" alt="NINES">
  <p class="eyebrow">NATIVE MODAL</p>
  <h1>dialog要素で確認モーダル</h1>
  <button class="open-button" type="button">削除内容を確認</button>

  <dialog id="confirmDialog" aria-labelledby="dialogTitle">
    <form method="dialog">
      <p class="eyebrow">CONFIRM</p>
      <h2 id="dialogTitle">この項目を削除しますか？</h2>
      <p>削除後は元に戻せません。内容を確認して操作してください。</p>
      <div class="dialog-actions">
        <button value="cancel">キャンセル</button>
        <button class="danger" value="delete">削除する</button>
      </div>
    </form>
  </dialog>

  <p id="result" aria-live="polite">まだ操作されていません。</p>
</main>

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f4f6f9;
  color: #111;
  font-family: system-ui, sans-serif;
}

.demo-card {
  position: relative;
  width: min(100%, 560px);
  padding: 40px;
  border: 1px solid #d9dee8;
  background: #fff;
  box-shadow: 0 20px 50px rgb(18 33 63 / 10%);
}

.nines-logo {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 58px;
  opacity: 0.16;
}

.eyebrow {
  color: #0057ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.open-button,
.danger {
  border-color: #0057ff;
  background: #0057ff;
  color: #fff;
}

dialog {
  width: min(calc(100% - 32px), 480px);
  padding: 0;
  border: 0;
  background: transparent;
}

dialog form {
  padding: 30px;
  border-left: 5px solid #0057ff;
  background: #fff;
  box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
}

dialog::backdrop {
  background: rgb(5 12 24 / 72%);
  backdrop-filter: blur(3px);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open] {
    animation: dialog-in 180ms ease-out;
  }

  @keyframes dialog-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.98);
    }
  }
}

const dialog = document.querySelector('#confirmDialog');
const openButton = document.querySelector('.open-button');
const result = document.querySelector('#result');

openButton.addEventListener('click', () => {
  dialog.showModal();
});

dialog.addEventListener('close', () => {
  result.textContent = dialog.returnValue === 'delete'
    ? '削除を選択しました。'
    : '操作をキャンセルしました。';
});