## 模態框 modal.js
* 模態框不支持嵌套,需要嵌套模態框的話,只能自己手動實現。
* 模態框包含的html最好盡量作為body的直接子元素,以避免其他組件影響模態框的展現和功能。
* 彈出層出來以后,頁面的滾動條會被覆蓋。
模態框主體結構包含了模態框的頭、體和一組放置于底部的按鈕 :
* modal 彈出層父級
* modal-dialog 彈出層
* modal-content 彈出層的內容區域
* modal-header 彈出層的頭部區域
* modal-body 彈出層的主體區域
* modal-footer 彈出層的底部區域
* fade 讓彈出層有一個運動的效果,加給彈出層父級
基本結構代碼如下:
```html
<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>
</div>
<div class="modal-body">
code。。。
</div><!--modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--modal-footer-->
</div><!-- modal-content -->
</div><!--modal-dialog -->
</div>
```

**動態實例**
點擊下面的按鈕即可通過 JavaScript 啟動一個模態框。在模態框之前添加一個按鈕(button),還需要給button添加data-toggle="modal" 和 data-target="目標模態框ID"(指定要切換的特定的模態框) 來啟動模態框效果,模態框將從上到下、逐漸浮現到頁面前。代碼如下:
```html
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
開始演示模態框
</button>
<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>
</div>
<div class="modal-body">
code。。。
</div><!--modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--modal-footer-->
</div><!-- modal-content -->
</div><!--modal-dialog -->
</div>
```
注意:增強模態框的可訪問性。務必為`.modal`添加`role="dialog"`和`aria-labelledby="..."`屬性,用于指向模態框的標題欄(modal-title);為`.modal-dialog`添加`aria-hidden="true"`屬性。
*****
**模態框可選尺寸**
模態框提供了兩個可選尺寸,通過為`.modal-dialog`增加一個樣式調整類實現。
大尺寸模態框(modal-lg):
```html
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
開始演示模態框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
code。。。
</div><!--modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--modal-footer-->
</div><!-- modal-content -->
</div><!--modal-dialog -->
</div>
```

小尺寸模態框(modal-sm):
```html
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
開始演示模態框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
</div>
<div class="modal-body">
code。。。
</div><!--modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!--modal-footer-->
</div><!-- modal-content -->
</div><!--modal-dialog -->
</div>
```

實際效果需要自己實際操作并在瀏覽器上展示。
*****
**禁止動畫效果**
如果不需要模態框彈出時的動畫效果(淡入淡出效果),刪掉`.fade`類就可以了。
*****
要利用模態中的引導網格系統(柵格系統),只需在.modal主體(modal-body)中嵌套.rows,然后使用普通的網格系統類;同樣的,在模態框中使用表單,只需在.modal主體(modal-body)中嵌套form表單。
**用法**
通過 data 屬性或 JavaScript 調用模態框插件,可以根據需要動態展示隱藏的內容。模態框彈出時還會為`<body>`元素添加`.modal-open`類,從而覆蓋頁面默認的滾動行為,并且還會自動生成一個`.modal-backdrop`元素用于提供一個可點擊的區域,點擊此區域就即可關閉模態框。
* 通過 data 屬性:在控制器元素(比如按鈕或者鏈接)上設置屬性 data-toggle=”modal”,同時設置 data-target=”#identifier” 或 href=”#identifier” 來指定要切換的特定的模態框(帶有 id=”identifier”)。例如:
```html
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
開始演示模態框
</button>
```
* 通過 JavaScript 調用:只需一行 JavaScript 代碼,即可通過元素的 id`myModal`調用模態框:
```js
$('#identifier').modal(options)
```
**參數**
* backdrop: true/false/'static' 背景遮罩的顯示與否
* keyboard: true/false 鍵盤上的esc鍵可否關閉模態框
* show:true/false 模態框是否初始好了就立即顯示
* remote: path 用jquery的load方法加載指定url的內容到*.modal-content*中
**方法**
```js
$('#myModal').modal(option); //顯示模態框
$('#myModal').modal('toggle'); //切換模態框的顯示和隱藏
$('#myModal').modal('show'); //顯示
$('#myModal').modal('hide'); //隱藏
```
**事件**
Bootstrap 的模態框類提供了一些事件用于監聽并執行你自己的代碼。
| 事件類型 | 描述 |
| --- | --- |
| show.bs.modal | `show`方法調用之后立即觸發該事件。如果是通過點擊某個作為觸發器的元素,則此元素可以通過事件的`relatedTarget`屬性進行訪問。 |
| shown.bs.modal | 此事件在模態框已經顯示出來(并且同時在 CSS 過渡效果完成)之后被觸發。如果是通過點擊某個作為觸發器的元素,則此元素可以通過事件的`relatedTarget`屬性進行訪問。 |
| hide.bs.modal | `hide`方法調用之后立即觸發該事件。 |
| hidden.bs.modal | 此事件在模態框被隱藏(并且同時在 CSS 過渡效果完成)之后被觸發。 |
| loaded.bs.modal | 從`遠端的數據源`加載完數據之后觸發該事件。 |
- 第一章 . bootstrap介紹
- 第二章 . 全局CSS樣式
- 1、總體注意事項
- 2、柵格系統
- 3、排版
- 4、代碼
- 5、表格
- 6、表單
- 7、 按鈕
- 8、 圖片
- 9、輔助類
- 10、響應式工具
- 第三章 . bootstrap相關CSS應用
- 1、CSS媒體查詢 @media
- 2、px,em,rem之間的關系和換算方式
- 第四章 . 組件
- 1、Glyphicons 字體圖標
- 2、下拉菜單
- 3、按鈕組
- 4、按鈕式下拉菜單
- 5、輸入框組
- 6、導航
- 7、導航條
- 8、路徑導航
- 9、分頁
- 10、標簽
- 11、徽章
- 12、巨幕
- 13、頁頭
- 14、縮略圖
- 15、警告框
- 16、進度條
- 17、媒體對象
- 18、列表組
- 19、面版
- 20、Well
- 第五章 . JavaScript 插件
- 1、JavaScript 插件引入前提
- 2、過渡效果 (transition.js)
- 3、模態框 (modal.js)
- 4、下拉菜單 (dropdown.js)
- 5、滾動監聽 (scrollspy.js)
- 6、可切換標簽 (tab.js)
- 7、工具提示 (tooltip.js)
- 8、彈出框 (popover.js)
- 9、警告信息 (alert.js)
- 10、按鈕 (button.js)
- 11、折疊插件(collapse.js)
- 12、輪播插件(carousel.js)
- 13、Affix插件(affix.js)