--- title: "Modal" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Modal using native HTML dialog. Accessible focus-trap, multiple sizes, and header/footer slots for overlays and confirmation dialogs." url: https://frutjam.com/zh-hant/components/modal --- # Modal Component 模態元件在對焦的覆蓋視窗中顯示重要資訊或請求使用者操作。模態基於語義 HTML 對話方塊元素構建，支援動畫、可自訂定位和背景覆蓋。 Frutjam 模態系統可透過鍵盤導航和陷阱焦點完全訪問，使其成為確認、表單和警報對話框的理想選擇。僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。 | 班級 | 類型 | 描述 | | ----------------- | --- | ----------- | | modal | 根據 | 全螢幕對話框覆蓋容器 | | modal-content | 修飾符 | 帶有填充和背景的內面板 | | modal-backdrop | 修飾符 | 點選關閉背景覆蓋 | | modal-top | 修飾符 | 將內容與螢幕頂部對齊 | | modal-bottom | 修飾符 | 將內容與螢幕底部對齊 | | modal-start | 修飾符 | 將內容左對齊 | | modal-end | 修飾符 | 將內容右對齊 | | modal-center | 修飾符 | 水平居中 | | modal-middle | 修飾符 | 垂直居中 | | modal-slide-up | 風格 | 上滑入口動畫 | | modal-slide-down | 風格 | 下滑入口動畫 | | modal-slide-start | 風格 | 從左側滑入動畫 | | modal-slide-end | 風格 | 從右側動畫滑入 | ## 基本用法將唯一的 ID 新增至 HTML 元素，然後在 JavaScript 中使用該 id 呼叫 `myModal.showModal()` 開啟模式，並使用 `myModal.close()` 關閉模式。 ## 按一下外部時關閉模態 `.modal-backdrop` 提供了一個可點擊的背景，當在模態內容之外點擊時，背景會關閉模態。 ```html ``` ## 模態幻燈片動畫使用模態組件中的以下定向實用程式類，從頂部、底部、開始（LTR 中向左、RTL 中向右）或結束（LTR 中向右、RTL 向左）平滑滑入和滑出：`modal-slide-top`、`modal-slide-bottom`、、`modal-slide-bottom`、、`mod-slide-bottom`、<這些動畫透過使用基於模態位置的動態過渡來改善使用者體驗。 ### 從頭開始模態幻燈片（水平）添加 modal-slide-start 實用程式以從起始側水平滑動模態；在從左到右 (LTR) 佈局中，它從左側出現；在從右到左 (RTL) 佈局中，它從右側出現。 ```html ``` ### 從末端開始模態滑動（水平）在模態組件中添加 `modal-slide-end` 實用程序，使模態從末端水平滑動；在從左到右 (LTR) 佈局中，它從右側出現；在從右到左 (RTL) 佈局中，它從左側出現。 ```html ``` ### 從底部滑動（垂直）：`modal-slide-up` 方向：從底部垂直滑入 ```html ``` ### 從頂部滑動（垂直）在模態元件中加入 modal-slide-down 公用程式以從頂部垂直滑入。 ```html ``` ### 用於通知的滑動動畫模式的範例用法 ```html ``` ## 模態展示位置預設情況下，模態元件位於螢幕中央，但可以根據使用情況使用水平類別 `modal-start`、`modal-center` 或 `modal-end` 以及垂直類別 `modal-top`、`modal-middle` 或 `modal-bottom`。佈局的設計考慮了 RTL 和 LTR 相容性，使模式能夠適應不同的語言方向和佈局。使用`modal-start`、`modal-center`或`modal-end`進行水平放置，使用`modal-top`、`modal-middle`或`modal-bottom`進行垂直放置。這些類別應用於模態組件。 ### 左上角模態位置 ```html ``` ### 頂部中心模態放置 ```html ``` ### 右上角模態位置 ```html ``` ### 居中左模態放置 ```html ``` ### 居中右模態放置 ```html ``` ### 左下角模態位置 ```html ``` ### 底部中心模態放置 ```html ``` ### 右下模態位置 ```html ``` ## 桌面和行動螢幕的模態響應式定位根據您的使用案例，您可以將模態框放置在桌面或行動裝置上的任何位置，例如桌面中心和行動裝置頂部中心。 ```html ``` ## 基於語言方向的模態定位根據語言方向（LTR 或 RTL）將模態框放置在螢幕上的任意位置。 ### LTR 和 RTL 中右對齊且垂直居中 ```html ``` ## 根據螢幕尺寸和語言方向放置模態框 ```html ```