Simple Dialog Sample

HTML

<button id="openDialogBtn">開啟對話框</button>

<dialog id="checkoutDialog">
  <form method="dialog">
    <p>請輸入您的名稱：</p>
    <input type="text" id="usernameInput" placeholder="輸入名稱…" />

    <div style="margin-top: 16px; text-align: right;">
      <button value="cancel">取消</button>
      <button value="confirm">送出</button>
    </div>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('checkoutDialog');
  const openBtn = document.getElementById('openDialogBtn');

  // 按下按鈕 → 打開 dialog
  openBtn.addEventListener('click', () => {
    dialog.showModal();
  });

  // 你也可以監聽 dialog 的關閉事件（例如取得 input 值）
  dialog.addEventListener('close', () => {
    if (dialog.returnValue === "confirm") {
      const name = document.getElementById('usernameInput').value;
      alert("使用者輸入："+name);
    }else{
      alert(dialog.returnValue);
    }
  
  });
</script>