HTML教程

想在頁面上彈出配送說明、確認提示或設定視窗，不一定要先找一套彈窗插件。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%);...

頁面上的補充說明越寫越長，卻不是每位讀者都需要看完。若只是讓人自行展開網站使用方式、準備資料或技術細節，可以先用HTML的details與summary，不必為這個小功能另外裝外掛。 但摺疊不是把頁面「變短」的萬能辦法。費用、使用條件、重要警告等讀者必須知道的資訊，應保持可見；適合收起來的是補充內容。 先有一個清楚的展開入口 summary放在details裡，作為讀者看到的標籤；其餘內容放在後面。下面用「需要準備什麼？」示範一段補充說明，不需要JavaScript： <details> <summary>需要準備什麼？</summary> <p>準備頁面文字與圖片草稿，再整理需要補充的資料。</p> </details> 標籤要說明展開後會得到什麼。「需要準備什麼？」比「更多」容易判斷。也不要為了版面乾淨，把原本的展開標記與鍵盤焦點全部拿掉。 「需要準備什麼？」已展開，其他入口仍可見。重要提醒直接顯示，補充資料讓讀者自行展開。 預設展開，用open；關閉則拿掉它 想讓內容一開始就顯示，可以寫<details open>。open是布林屬性，是否存在才是重點：open="false"仍會展開，不能用這種寫法關閉。要預設關閉，就移除open。 網站可以用同樣方式收起「使用前要準備哪些資料？」等補充說明。圖中的「需要準備什麼？」展開後，其他問題仍保持原來的狀態。若只是各自開合，先維持這個簡單做法，不必急著加入只能開一項的行為。 用鍵盤走一次，不只試滑鼠 修改後，先按Tab找到每個問題，確認焦點清楚可見，再試空白鍵開合，並確認內容能正常讀到。手機上也要看長標籤是否換行、展開後會不會超出畫面。 把元件放回自己的網站後，還要連同主題樣式、其他腳本與實際使用方式一起檢查。不要只因為滑鼠點得開，就認定所有使用方式都沒問題。 保留一份修改前HTML，先在自己的測試頁加入元件。發現標籤看不懂、焦點消失或必要資訊被藏起來，就先恢復原本直接顯示的內容，再調整設計。 參考資料 MDN：details MDN：summary 資料查核：2026年10月2日。