Bootstrap JS 模態框
JS Modal (modal.js)
模態框外掛是一個對話方塊/彈出視窗，它顯示在當前頁面的頂部。
有關模態框的教程，請閱讀我們的 Bootstrap 模態框教程。
模態框外掛類
| 類 | 描述 |
|---|---|
| .modal | 建立一個模態框 |
| .modal-content | 使用邊框、背景色等正確樣式化模態框。使用此類來新增模態框的標題、正文和頁尾。 |
| .modal-header | 定義模態框標題的樣式 |
| .modal-body | 定義模態框正文的樣式 |
| .modal-footer | 定義模態框頁尾的樣式。注意： 此區域預設右對齊。要更改此設定，請使用 text-align:left|center 覆蓋 CSS。 |
| .modal-sm | 指定一個小的模態框 |
| .modal-lg | 指定一個大的模態框 |
| .fade | 新增一個動畫/過渡效果，使模態框淡入淡出。 |
透過 data-* 屬性觸發模態框
在任何元素上新增 data-toggle="modal" 和 data-target="#modalID"。
注意： 對於 <a> 元素，請省略 data-target，而是使用 href="#modalID"。
示例
<!-- 按鈕 -->
<button type="button" data-toggle="modal" data-target="#myModal">開啟模態框</button>
<!-- Links -->
<a data-toggle="modal" href="#myModal">開啟模態框</a>
<!-- 其他元素 -->
<p data-toggle="modal" data-target="#myModal">開啟模態框</p>
自己動手試一試 »
透過 JavaScript 觸發
使用以下命令手動啟用：
模態框選項
選項可以透過 data 屬性或 JavaScript 傳遞。對於 data 屬性，將選項名稱附加到 data- 後面，如 data-backdrop="".
| 名稱 | 型別 | 預設值 | 描述 | 試一試 |
|---|---|---|---|---|
| backdrop | boolean 或字串 "static" | true | 指定模態框是否應具有深色覆蓋層。
如果指定值 "static"，則無法透過點選模態框外部來關閉它。 |
使用 JS 使用 data |
| 鍵盤 | boolean | true | 指定模態框是否可以使用 Escape 鍵（Esc）關閉
|
使用 JS 使用 data |
| show | boolean | true | 指定在初始化時是否顯示模態框 | 使用 JS 使用 data |
模態框方法
下表列出了所有可用的模態框方法。
| 方法 | 描述 | 試一試 |
|---|---|---|
| .modal(options) | 將內容啟用為模態框。有關有效值，請參見上方的選項。 | 試一試 |
| .modal("toggle") | 切換模態框 | 試一試 |
| .modal("show") | 開啟模態框 | 試一試 |
| .modal("hide") | 隱藏模態框 | 試一試 |
模態框事件
下表列出了所有可用的模態框事件。
| 事件 | 描述 | 試一試 |
|---|---|---|
| show.bs.modal | 當模態框即將顯示時觸發 | 試一試 |
| shown.bs.modal | 當模態框完全顯示時觸發（在 CSS 過渡完成後） | 試一試 |
| hide.bs.modal | 當模態框即將隱藏時觸發 | 試一試 |
| hidden.bs.modal | 當模態框完全隱藏時觸發（在 CSS 過渡完成後） | 試一試 |
更多示例
登入模態框
以下示例建立了一個用於登入的模態框
示例
<div class="container">
<h2>模態框登入示例</h2>
<!-- 使用按鈕觸發模態框 -->
<button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div>
自己動手試一試 »
