響應式前端框架Bootstrap系列（16）模態框（Modal）外掛
模態框是bs框架的外掛之一，之所以稱為外掛，是因為它有這自己的一套API，可以通過API提供的介面實現對模態框的控制。只要 是bs框架外掛，都支援以下幾個共同的屬性：
data-toggle屬性：表示點選或連結時觸發的事件。
data-target屬性：表示點選或連結時觸發的事件後將要被顯示或隱藏的目標元素。
data-dismiss：是bootstrap裡自定義的屬性，給一個元素data-dimiss屬性的話，可以通過點選該元素達到讓目標消失的效果。
若要取消外掛自帶的事件監聽，可使用：
全部取消：$(document).off('.data-api');
單獨某外掛取消：$(document).off('.modal.data-api');該程式碼只取消了模態框
Bootstrap Modals（模態框）是使用定製的 Jquery 外掛建立的。它可以用來建立模態視窗豐富使用者體驗，或者為使用者新增實用功能。您可以在 Modals（模態框）中使用 Popover（彈出框）和 Tooltip（工具提示外掛）。
模態框有關樣式有：
.modal：用來把 <div> 的內容識別為模態框。
.fade：當模態框被切換時，它會引起內容淡入淡出。
.modal-dialog：表示模態對話方塊。
.modal-content：表示模態內容。
.modal-header：表示模態對話方塊頭部。
.modal-title：表示模態對話方塊標題，通常放在.modal-header的容器內。
.modal-body：表示模態對話方塊主體內容。
.modal-footer：表示模態對話方塊尾部。
以下是模態框的API，包括入參項、方法和事件。
入參項：
（1）backdrop，屬性data-backdrop（預設為true），指定一個靜態的背景，當用戶點選模態框外部時不會關閉模態框。
（2）keyboard，屬性data-keyboard（預設為true），當按下 escape 鍵時關閉模態框，設定為 false 時則按鍵無效。
（3）show，屬性data-show（預設為true），當初始化時顯示模態框。
（4）remote，屬性data-remote（預設為false），表示引用外部模態框內容。
方法：
（1）.modal(options)，把內容作為模態框啟用。接受一個可選的選項物件。如$('#myModal').modal({keyboard: false})
（2）.modal('show')，手動開啟模態框。如$('#myModal').modal('show')
（3）.modal('hide')，手動隱藏模態框。如$('#myModal').modal('hide')
事件：
（1）show.bs.modal，在呼叫 show 方法後觸發。如$('#myModal').on('show.bs.modal', function() {});
（2）shown.bs.modal，當模態框對使用者可見時觸發（將等待 CSS 過渡效果完成）
（3）hide.bs.modal，當呼叫 hide 例項方法時觸發。
（4）hidden.bs.modal，當模態框完全對使用者隱藏時觸發。
模態框演示程式碼：
<body>
<div class="container">
<h2>建立模態框（Modal）</h2>
<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>
<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>
</div>
</div>
</div>
</body>
<script>
$('#myModal').on('show.bs.modal', function() {
console.log('show.bs.modal');
});
$('#myModal').on('shown.bs.modal', function() {
console.log('shown.bs.modal');
})
$('#myModal').on('hide.bs.modal', function() {
console.log('hide.bs.modal');
})
$('#myModal').on('hidden.bs.modal', function() {
console.log('hidden.bs.modal');
})
</script>