用法
切換模態框 (Modal) 插件來開啟或是隱藏內容。
- 通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）。
- 通過 JavaScript：jQuery 調用帶有 id="identifier" 的模態框。 ('#identifier').modal(options)
代碼說明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </button> <!-- 模态框（Modal） --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> 在这里添加一些文本 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> |
- 使用模態窗口要有某種觸發器，使用按鈕或鏈接。
- <button> 標籤中， data-target="#myModal"，在頁面上加載的模態框的目標，指定於特定模態框創建於不同的觸發器。
- 模態框中需要注意兩點：
- .modal，用來把 <div> 的內容識別為模態框。
- .fade 當模態框被切換時，會引起內容淡入淡出。
- aria-labelledby="myModalLabel"，該屬性引用模態框的標題。
- 屬性 aria-hidden="true" 用於保持模態窗口不可見，直到觸發器被觸發為止（比如點擊在相關的按鈕上）。
- .modal-header 是為模態窗口的頭部定義樣式的類。
- .close 是一個 CSS class，用於為模態窗口的關閉按鈕設置樣式。
- data-dismiss="modal"，是一個自定義的 HTML5 data 屬性，在這裡它被用於關閉模態窗口。
- .modal-body，用於為模態窗口的主體設置樣式。
- .modal-footer，用於為模態窗口的底部設置樣式。
- data-toggle="modal"，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。
參考資料
@EncyKe – Bootstrap【进阶篇】
(模態彈出框 Modals、下拉菜單 Dropdown、滾動監視 Scrollspy 等等相關 jQuery 插件與 HTML 內結構用法說明)