JS模態(modal.js)
模態插件是顯示在當前頁的頂部的對話框/彈出式窗口。
對於有關情態動詞的教程，請閱讀我們的Bootstrap模態教程 。
模態類插件
| 類 | 描述 |
|---|---|
| .modal | 創建一個模式 |
| .modal-content | 樣式模態與邊框，背景顏色等，正確地使用這個類來添加模式的標題，正文和頁腳。 |
| .modal-header | 定義樣式模態的頭 |
| .modal-body | 定義樣式模態的身體 |
| .modal-footer | 定義的模式頁腳的樣式。 注：該區域是右對齊默認情況下。 要改變這一狀況，覆蓋與文本對齊的CSS：左|中心 |
| .modal-sm | 指定一個小的模態 |
| .modal-lg | 指定一個大模式 |
| .fade | 添加漸漸消逝模態和出動畫/過渡效果 |
觸發模態通過data-*屬性
添加data-toggle="modal"和data-target="#modalID"的任何元素。
注意：對於<a>元素，忽略data-target ，並使用href="#modalID"來代替：
例
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Links -->
<a data-toggle="modal"
href="#myModal">Open
Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open
Modal</p>
試一試» 觸發通過JavaScript
與手動啟用：
模式選項
選項可以通過數據屬性或JavaScript進行傳遞。 對於數據屬性，選項名稱追加到數據- ，如data-backdrop=""
| 名稱 | 類型 | 默認 | 描述 | 嘗試一下 |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | 指定模式是否應該有一個黑暗的疊加：
如果您指定的值"static"它是不可能的點擊它外面時，關閉模式 | 使用JS 使用數據 |
| keyboard | boolean | true | 指定是否模態可以用ESC鍵關閉(Esc)
| 使用JS 使用數據 |
| show | boolean | true | 指定初始化時是否顯示模態 | 使用JS 使用數據 |
模態法
下表列出了所有可用的模式方法。
| 方法 | 描述 | 嘗試一下 |
|---|---|---|
| .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>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<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> 試一試»