Bootstrap JS Modal
Modal CSS 類
關於 Modal 的教程，請閱讀我們的 Bootstrap Modal 教程。
| 類 | 描述 | 示例 |
|---|---|---|
.modal |
建立一個 modal | 試一試 |
.modal-content |
使用邊框、背景色等正確樣式化 modal。使用此 class 為 modal 新增標題、主體和頁尾。 | 試一試 |
.modal-dialog-centered |
將 modal 在頁面中垂直和水平居中 | 試一試 |
.modal-dialog-scrollable |
在 modal 中新增捲軸 | 試一試 |
.modal-header |
定義 modal 標題的樣式 | 試一試 |
.modal-body |
定義 modal 主體的樣式 | 試一試 |
.modal-footer |
定義 modal 頁尾的樣式。注意： 此區域預設右對齊。要更改此設定，請將 justify-content-start 或 justify-content-center 與 .modal-footer class 一起新增。 | 試一試 |
.modal-sm |
指定一個小的 modal | 試一試 |
.modal-lg |
指定一個大的 modal | 試一試 |
.fade |
新增淡入淡出 modal 的動畫/過渡效果 | 試一試 |
透過 data-* 屬性觸發 Modal
將 data-toggle="modal" 和 data-target="#modalID" 新增到任何元素。
注意： 對於 <a> 元素，省略 data-target，而是使用 href="#modalID"。
示例
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">開啟 Modal</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">開啟 Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">開啟 Modal</p>
自己動手試一試 »
透過 JavaScript 觸發
使用以下命令手動啟用：
Modal 選項
可以透過 data 屬性或 JavaScript 傳遞選項。對於 data 屬性，將選項名稱附加到 data-，例如 data-backdrop="".
| 名稱 | 型別 | 預設值 | 描述 | 試一試 |
|---|---|---|---|---|
| backdrop | boolean 或字串 "static" | true | 指定 modal 是否應具有深色疊加層
如果指定值為 "static"，則無法透過點選 modal 外部來關閉它。 |
使用 JS 使用 data |
| 鍵盤 | boolean | true | 指定 modal 是否可以使用 escape 鍵（Esc）關閉
|
使用 JS 使用 data |
| show | boolean | true | 指定初始化時是否顯示 modal | 使用 JS 使用 data |
Modal 方法
下表列出了所有可用的 modal 方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .modal(options) | 將內容啟用為一個 modal。有關有效值，請參閱上面的選項。 | 試一試 |
| .modal("toggle") | 切換 modal | 試一試 |
| .modal("show") | 開啟 modal | 試一試 |
| .modal("hide") | 隱藏 modal | 試一試 |
Modal 事件
下表列出了所有可用的 modal 事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| show.bs.modal | 在 modal 即將顯示時觸發 | 試一試 |
| shown.bs.modal | 在 modal 完全顯示時觸發（在 CSS 過渡完成後） | 試一試 |
| hide.bs.modal | 在 modal 即將隱藏時觸發 | 試一試 |
| hidden.bs.modal | 在 modal 完全隱藏時觸發（在 CSS 過渡完成後） | 試一試 |
