Bootstrap模態框（modal），並新增帶複選框的表格（table），還可做提示框、檔案選擇框等，很實用！
Bootstrap中的模態框外掛以彈出對話方塊的形式出現，具有最小和最實用的功能集，主要的是使用起來很靈活！有以下幾個特性：（1）不支援同時開啟多個模態框；（2）務必將模態框的 HTML 程式碼放在文件的最高層級內（也就是說，儘量作為 body 標籤的直接子元素），以避免其他元件影響模態框的展現和功能。
1、modal分為靜態框和動態框：
（1）下面是最簡單的modal的靜態示例，也是最基礎的modal樣式：
<div class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></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><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
（2）除靜態樣式外，還有更常用的動態樣式（即通過點選等方式彈出模態框）：
<!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-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>
2、至於模態框中的內容，幾乎可以新增常用的所有東西，比如表單組、列表等各種DOM，樣式如下：
由於篇幅關係，在這裡只提供下樣式，具體的HTML寫法可以參照官網： https://v3.bootcss.com/javascript/#modals；裡面還有詳細講述modal外掛的屬性以及事件資訊，感興趣的話可以自行查閱。
3、下面是個人使用modal的示例，實現了動態模態框實時顯示SGS伺服器(Skyline Global的伺服器)中的圖層列表並新增複選框，還實現了將選中圖層新增到二維三維視窗的功能。聽著是不是很神奇，剛開始接觸的時候我自己覺得肯定做不到，這裡有前後端互動，XML檔案解析，模態框資料傳入傳出、動態表格建立等等一攬子難題（小白很慌），但是後來還是硬著頭皮一點點將這塊骨頭啃下來了，這也給我莫大的信心。再大的問題從細小處著手化為一些列小問題，然後各個擊破，最終會發現一切難題迎刃而解。不扯了，還是跟大家分享下成果：
<div tabindex="-1" class="modal fade in" id="myModal" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">
×
</button>
<h4 class="modal-title" id="myModalLabel">
請選擇要新增的資料
</h4>
</div>
<div class="modal-body" id="tanchu">
<div class="bs-example" data-example-id="hoverable-table">
<table class="table table-hover" id="btable">
<thead>
<tr>
<th>#</th>
<th>名稱</th>
<th>型別</th>
<th>記錄數</th>
</tr>
</thead>
<tbody id="tableble">
<tr id="1"><td id="chebox0"><input name="num1000.398445" class="checkbox" type="checkbox"></td><td>num1000.398445</td><td>XML</td><td>979</td></tr><tr id="2"><td id="chebox1"><input name="Fairfax_zones.397739" class="checkbox" type="checkbox"></td><td>Fairfax_zones.397739</td><td>XML</td><td>471</td></tr><tr id="4"><td id="chebox2"><input name="World_Capital.397738" class="checkbox" type="checkbox"></td><td>World_Capital.397738</td><td>XML</td><td>331</td></tr><tr id="7"><td id="chebox3"><input name="_3dml1.397337" class="checkbox" type="checkbox"></td><td>_3dml1.397337</td><td>XML</td><td>226</td></tr><tr id="11"><td id="chebox4"><input name="hyd2_4l.397336" class="checkbox" type="checkbox"></td><td>hyd2_4l.397336</td><td>XML</td><td>708</td></tr><tr id="16"><td id="chebox5"><input name="building.397335" class="checkbox" type="checkbox"></td><td>building.397335</td><td>XML</td><td>837</td></tr></tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">關閉
</button>
<button class="btn btn-primary" onclick="intimenu()" type="button">
新增
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
當然程式碼中table為動態生成， 實現過程為獲取後臺返回的XML檔案並解析獲得圖層名，再實現table動態建立，樣例程式碼如下：
for (var i=0;i<tanchus.length;i++)
{
var m = document.createElement("tr");
m.setAttribute("id",k);
document.getElementById("tableble").appendChild(m);
var m5 = document.createElement("td");
m5.setAttribute("id","chebox"+i);
document.getElementById(k).appendChild(m5);
var m6 = document.createElement("input");
m6.setAttribute("type","checkbox");
m6.setAttribute("class","checkbox");
m6.setAttribute("name",tanchus[i]);
document.getElementById("chebox"+i).appendChild(m6);
var m2 = document.createElement("td");
m2.innerText=tanchus[i];
document.getElementById(k).appendChild(m2);
var m3 = document.createElement("td");
m3.innerText="XML";
document.getElementById(k).appendChild(m3);
var m4 = document.createElement("td");
m4.innerText=Math.ceil(Math.random()*1000);
document.getElementById(k).appendChild(m4);
k=k+i+1;
}至於將選中的圖層新增到相應二三維視窗的實現思路為：獲取table中所有的checkbox,遍歷並記錄選中狀態的check，到這裡又有同學問知道了checkbox的狀態又能怎樣，該怎麼獲取相應行的圖層名呢？這裡我耍了點小心機，規避了一個技術問題（不知道是好是壞），我將checkbox的name設定成了圖層名，直接讀取相應的name屬性就好了。
var strIds=new Array();
var get = $(".checkbox");
for (i = 0 ; i < get.length; i++) {
if (get[i].checked) {
strIds.push(get[i].name);
}
}嘿嘿，大體上就是這些內容了，自覺還有很多地方都不太成熟老練，希望大佬們如果對我有所指教的可以私信我哦，萬分感謝！