HTML dialog 怎麼做彈出視窗：開啟、關閉與焦點先做好

想在頁面上彈出配送說明、確認提示或設定視窗，不一定要先找一套彈窗插件。HTML 的 dialog 已經提供開啟、關閉與模態行為；比較容易漏掉的，是關閉按鈕、鍵盤操作和關閉後的焦點。

先分清：只是顯示，還是暫停操作背景？

show() 開啟非模態對話框，背景仍可操作。showModal() 則開啟模態對話框，讓背景暫時不可互動，並把對話框放到瀏覽器的頂層。若只是放一段常駐提示，不必用模態視窗打斷讀者。

直接寫 <dialog open> 只是顯示非模態對話框；不能把它當成 showModal() 的替代品。

一個可關閉的配送說明

下面的例子用普通按鈕開啟視窗。視窗內有標題與關閉按鈕，aria-labelledby 指向標題，讓對話框有可辨識的名稱。

<button id="openInfo" type="button">查看配送說明</button>
<dialog id="info" aria-labelledby="infoTitle">
  <h2 id="infoTitle">配送說明</h2>
  <p>範例商品會在三個工作天內安排出貨。</p>
  <form method="dialog">
    <button autofocus>關閉說明</button>
  </form>
</dialog>
<script>
  const info = document.querySelector('#info');
  document.querySelector('#openInfo').addEventListener('click', () => {
    info.showModal();
  });
</script>

method="dialog" 會關閉對話框，這個表單不會把資料提交到伺服器。範例的配送文字只是示例，實際站點應換成自己的說明。

關閉與焦點，比外觀更早確認

先用鍵盤走一次：Tab 移到開啟按鈕，按 Enter 開啟；確認焦點進入視窗，按 Esc 關閉，再看焦點是否回到開啟按鈕。視窗內的關閉按鈕也要能操作，因為手機使用者未必有 Esc 鍵。

autofocus 應放在打開後最合理的控制項。本例沒有需要立即填寫的欄位，因此放在關閉按鈕；有表單時，第一個欄位或其他控制項可能更適合。不要在 dialog 元素上加 tabindex 來勉強取得焦點。

若視窗內容很長，限制它的最大高度並讓內容可捲動；手機上尤其要避免關閉按鈕跑到畫面外。背景點一下是否關閉則需要明確設計，不要假設所有對話框都會如此。

加上薄薄一層外觀即可

dialog { max-width: min(32rem, calc(100vw - 2rem)); }
dialog::backdrop { background: rgb(0 0 0 / 45%); }

先在自有測試頁確認開關、焦點與手機捲動，再搬到正式頁。想撤回時，移除這個對話框、開啟事件與對應樣式即可，不需要動整站的頁面結構。瀏覽器版本、螢幕閱讀器與複雜表單仍應按實際使用環境確認，除了鍵盤操作，也要按訪客使用的裝置與輔助工具檢查。

參考資料

資料核對於2026年10月3日；瀏覽器支援與文件可能更新。