Bootstrap3.0學習第十七輪(JavaScript插件——模態框)
前言
閱讀之前您也可以到Bootstrap3.0入門學習系列導航中進行查看http://www.cnblogs.com/aehyok/p/3404867.html
本文主要來學習一下JavaScipt插件模態框。在學習模態框之前，我們先來了解一下JavaScript插件吧。
插件可以單個引入（使用Bootstrap提供的單個*.js文件），或一次性全部引入（使用bootstrap.js或壓縮版的bootstrap.min.js）。
不要將兩份文件全部引入
bootstrap.js和bootstrap.min.js同樣是包含了所有插件。區別是：一個沒有壓縮，一個進行了壓縮。
插件之間的依賴
某些插件和CSS組件依賴於其它插件。如果你是單個引入每個插件的，請確保在文檔中檢查插件之間的依賴關系。注意，所有插件都依賴jQuery（也就是說，jQuery必須在所有插件之前引入頁面）。
bower.json文件中列出了所支持的jQuery版本。
Data屬性
你可以僅僅通過data屬性API就能使用所有的Bootstrap插件，無需寫一行JavaScript代碼。這是Bootstrap中的一等API，也應該是你的首選方式。
話又說回來，在某些情況下可能需要將此功能關閉。因此，我們還提供了關閉data屬性API的方式，即解除綁定到文檔命名空間上的所有事件data-api。就像下面這樣：
$(document).off('.data-api')
另外，如果是針對某個特定的插件，只需在data-api前面添加那個插件的名稱作為命名空間，如下：
$(document).off('.alert.data-api')
編程式API
我們還提供了所有Bootstrap插件的純JavaScript API。所有公開的API都是支持單獨或鏈式調用的，並且返回其所操作的元素集合（注：和jQuery的調用形式一致）。
$(".btn.danger").button("toggle").addClass("fat")
所有方法都可以接受一個可選的option對象作為參數，或者一個代表特定方法的字符串，或者什么也不提供（在這種情況下，插件將會以默認值初始化）：
$("#myModal").modal() // 使用默認值初始化 $("#myModal").modal({ keyboard: false }) $("#myModal").modal('show')
每個插件還通過Constructor屬性暴露了其自身的構造器函數：$.fn.popover.Constructor。如果你想獲取某個插件的實例，可以直接從頁面元素內獲取：$('[rel=popover]').data('popover')。
避免沖突
某些時候可能需要將Bootstrap插件與其他UI框架共同使用。在這種情況下，命名空間沖突隨時可能發生。如果不行發生了這種情況，你可以通過調用插件的.noConflict方法恢復原始值。
var bootstrapButton = $.fn.button.noConflict()
$.fn.bootstrapBtn = bootstrapButton
事件
Bootstrap為大部分插件所具有的動作提供了自定義事件。一般來說，這些事件都有不定式和過去式兩種動詞形式，例如，不定式形式的動詞表示其在事件開始時被觸發；而過去式動詞表示其在動作直接完畢之后被觸發。
從3.0.0開始，所有的Bootstrap事件都采用了命名空間。
所有以不定式形式的動詞命名的事件都提供了preventDefault功能。這就賦予你在動作開始執行前將其停止的能力。
$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() })
第三方工具庫
Bootstrap官方不提供對第三方JavaScript工具庫的支持，例如Prototype或jQuery UI。除了
.noConflict和采用命名空間的事件，還可能會有兼容性方面的問題，這就需要你自己來處理了
案例
模態框經過了優化，更加靈活，以彈出對話框的形式出現，具有最小和最實用的功能集。
不支持模態框重疊
千萬不要在一個模態框上重疊另一個模態框。要想同時支持多個模態框，需要自己寫額外的代碼來實現。
靜態案例
以下模態框包含了模態框的頭、體和一組在放置於底部的按鈕。
<div class="modal fade"> <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">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
首先最外層的是model，然后里面嵌套了一個model-dialog,model-dialog里面又嵌套model-content,當中包含“header”、“title”、"footer"。不過運行程序后，模態框沒有顯示出來，暫時還沒找到原因。
動態演示
點擊下面的按鈕即可通過JavaScript啟動一個模態框。此模態框將從上到下、逐漸浮現到頁面前。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </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 title</h4> </div> <div class="modal-body"> One fine body… </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
同樣的，不過首先是一個按鈕，按鈕中添加了兩個data屬性，要設置data-toggle="modal" data-target="#myModal"。
然后下面最大的是一個modal，並且給與屬性id賦值為上面button中的data-target ，進行交互。
增強模態框的可訪問性
請確保為
.modal添加了role="dialog"；aria-labelledby="myModalLabel"屬性指向模態框標題；aria-hidden="true"告訴輔助性工具略過模態框的DOM元素。
另外，你還應該為模態框添加描述性信息。為
.modal添加aria-describedby屬性用以指向描述信息。
用法--通過data屬性
不需寫JavaScript代碼也可激活模態框。通過在一個起控制器作用的頁面元素（例如，按鈕）上設置data-toggle="modal"，並使用data-target="#foo"或href="#foo"指向特定的模態框即可。就像本例中的
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button>
用法--通過JavaScript調用
只需一行JavaScript代碼，即可通過id myModal調用模態框：
$('#myModal').modal(options)
選項
可以將選項通過data屬性或JavaScript傳遞。對於data屬性，需要將選項名稱放到data-之后，例如data-backdrop=""。
方法
.modal(options)
將你指定的內容作為模態框啟動。其接受一個可選的object類型的參數。
$('#myModal').modal({ keyboard: false })
.modal('toggle')
手動啟動或隱藏模態框。
$('#myModal').modal('toggle')
手動打開一個模態框。
$('#myModal').modal('show')
手動隱藏一個模態框。
$('#myModal').modal('hide')
將上面的示例代碼進行修改，其主要變化在於按鈕上
<script type="text/javascript"> function test() { $('#myModal').modal('show'); alert(1); } </script> <button onClick="test()" class="btn btn-primary btn-lg"> Launch demo modal </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 title</h4> </div> <div class="modal-body"> One fine body… </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
並且為按鈕添加了onclick事件，也就是通過點擊按鈕觸發事件來進行模態框的彈出。
通過定義的函數和運行效果來看，的確是通過JavaScript函數進行的彈框。
事件
Bootstrap的模態框類暴露了一些事件用於截獲並執行自己的代碼。
<script type="text/javascript"> $('#myModal').on('hide.bs.modal', function () { alert(11); }); </script>
然后執行關閉的時候就會發現
最后把所有代碼代碼貼出來
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
.btn-group:hover>.dropdown-menu{display:block;}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
.btn-group:hover>.dropdown-menu{display:block;}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1></h1>
<script type="text/javascript">
function test()
{
$('#myModal').modal('show');
alert(1);
}
</script>
<button onClick="test()" class="btn btn-primary btn-lg">
Launch demo modal
</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 title</h4>
</div>
<div class="modal-body">
One fine body…
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#myModal').on('hide.bs.modal', function () {
alert(11);
});
</script>
</body>
</html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style type="text/css"> .btn-group:hover>.dropdown-menu{display:block;} </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <!DOCTYPE html> <html lang="zh-CN"> <head> <title>Bootstrap</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <style type="text/css"> .btn-group:hover>.dropdown-menu{display:block;} </style> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1></h1> <script type="text/javascript"> function test() { $('#myModal').modal('show'); alert(1); } </script> <button onClick="test()" class="btn btn-primary btn-lg"> Launch demo modal </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 title</h4> </div> <div class="modal-body"> One fine body… </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $('#myModal').on('hide.bs.modal', function () { alert(11); }); </script> </body> </html>
關於模態框的學習，感覺過程中遇到了好多問題，到現在還沒有解決，不過大體上已經了解了，還需要慢慢深入。關於JavaScript插件看來沒那么容易勒。
本文已更新至Bootstrap3.0入門學習系列導航http://www.cnblogs.com/aehyok/p/3404867.html