互動視窗 (Modal)

  • 新提案
  • →
  • 封閉測試
  • →
  • 公開測試
  • →
  • 已穩定
成熟度說明
  • 新提案：未完成開發、請勿使用。
  • 封閉測試：開發暫時性完成，可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試：開發暫時性完成，歡迎使用。具有完整親和力報告。
  • 已穩定：開發完成、歡迎使用。應無任何親和力或使用上問題。

基本 Modal

HTML
<button
  type="button"
  class="button"
  data-modal-trigger="modal-demo"
  aria-haspopup="dialog"
>
  開啟 Modal
</button>

<!--
  無 JS 降級：若未載入 JavaScript，可在 <dialog> 加上 open 屬性使其靜態展開。
  例如：<dialog id="modal-demo" open aria-modal="true" ...>
-->
<dialog
  id="modal-demo"
  aria-modal="true"
  aria-labelledby="modal-demo-title"
  aria-describedby="modal-demo-desc"
>
  <div class="modal-header">
    <h2 id="modal-demo-title" class="modal-title">Modal 標題</h2>
    <form method="dialog">
      <button
        type="submit"
        class="modal-close"
        data-modal-close
        autofocus
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 20 20"
          aria-hidden="true"
          focusable="false"
        >
          <line x1="3" y1="3" x2="17" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          <line x1="17" y1="3" x2="3" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        <span class="visually-hidden">關閉</span>
      </button>
    </form>
  </div>
  <div class="modal-body">
    <p id="modal-demo-desc">
      這是 Modal 的說明文字。Modal 適用於需要使用者確認、閱讀重要資訊或填寫表單的情境。
      請確認後點擊「確認」或按 ESC 鍵關閉。
    </p>
  </div>
  <form method="dialog" class="modal-footer">
    <button type="submit" class="button" data-modal-close>取消</button>
    <button type="submit" class="button button-primary" data-modal-close>確認</button>
  </form>
</dialog>

<!--
  Backdrop 點擊關閉：預設啟用。
  若需停用 backdrop 點擊關閉（例如表單型 Modal），在 <dialog> 加上：
    data-modal-no-backdrop-close
-->

CSS

  • data-modal-trigger="[id]"：觸發按鈕，對應 <dialog> 的 id。
  • data-modal-close：關閉按鈕。
  • data-modal-no-backdrop-close：加在 <dialog> 上，停用點擊遮罩關閉行為（適用於含表單的 Modal）。
  • .modal-header / .modal-body / .modal-footer：Modal 內容區塊。

親和力

  • 使用原生 <dialog> 元素搭配 showModal()，瀏覽器原生提供 focus trap 與 ESC 關閉。
  • 開啟時焦點移至 <dialog> 本身（需設 tabindex="-1"），使螢幕閱讀器先宣告標題後再讓使用者操作。
  • 關閉時焦點還原至觸發按鈕。
  • 圖示型關閉按鈕須加 aria-label="關閉"；使用文字「關閉」則不需要。

JavaScript

參考