Bootstrap的Modal這個模態窗組件還是很好用的，但在開發的過程中模態窗中的內容大部分都是從后端加載的。要實現模態窗的內容是從后端加載話，常用的實現方式有2種。它們是：
（1）Modal里面套一個Iframe，通過Iframe的src去加載遠程的內容。這種方式的缺點是這個模態框的寬度和高度不好調，而且把寬度和高度設置成固定值，就破壞了bootstrap的響應式布局了。
（2）使用Modal的remote參數去加載遠程的內容。這種方式有些小bug（后面會介紹解決方案），不過這種方式沒有上一種方式需要手動設置的寬度和高度的麻煩。
個人比較喜歡第2種方式，這樣就介紹下使用remote的方式。
本次使用的bootsrap的版本是 3.3.7
一、頁面的准備
（1）主頁面
主頁面這里，先放置好一個模態框，不過模態框里面的內容是空白的。后續遠程加載后的數據就會自動填充到
class
=
"modal-content"
這個Div里面。准備好如下html代碼：
<!-- 彈出模態窗口-->
<div class="modal fade" style="top:13%;" tabindex="-1" role="dialog" id="showModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- 內容會加載到這里 -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
9
1
<!-- 彈出模態窗口-->
2
<div class="modal fade" style="top:13%;" tabindex="-1" role="dialog" id="showModal">
3
<div class="modal-dialog" role="document">
4
<div class="modal-content">
5
<!-- 內容會加載到這里 -->
6
</div>
7
</div><!-- /.modal-content -->
8
</div><!-- /.modal-dialog -->
9
</div><!-- /.modal -->
放置好模態窗口后，我們可以在主頁面上放一個按鈕來觸發這個模態窗口的顯示，這個按鈕的html代碼如下：
<button type="button" id="addBtn" class="btn btn-primary">新增用戶</button>
1
1
<button type="button" id="addBtn" class="btn btn-primary">新增用戶</button>
按鈕和模態窗好后，我們需要給這個按鈕綁定點擊事件，點擊后顯示模態窗口並從遠程加載數據。js代碼如下：
$("#addBtn").click(function(){
// 打開模態框
$("#showModal").modal({
backdrop: 'static', // 點擊空白不關閉
keyboard: false, // 按鍵盤esc也不會關閉
remote: '/sys/toAddUser' // 從遠程加載內容的地址
});
});
8
1
$("#addBtn").click(function(){
2
// 打開模態框
3
$("#showModal").modal({
4
backdrop: 'static', // 點擊空白不關閉
5
keyboard: false, // 按鍵盤esc也不會關閉
6
remote: '/sys/toAddUser' // 從遠程加載內容的地址
7
});
8
});
主頁面的內容就是這些，
注意：開始的那些引入bootstrap相關的代碼我沒貼，使用時需要自己引入好。
（2）待加載到模態框里面的頁面准備
首先，
我先說下，這個頁面里面不需要引入和任何的js和css。因為
這個頁面加載到模態框里面后，就相當於主頁面上的一部分了。有點像主頁面把它給動態導入的感覺，它可以訪問主頁面的任何內容。這個頁面可以看成是
class
=
"modal-content"
這個DIV內容，加載后就把這些html代碼嵌入到里面去了。因此寫這個頁面時，我們可以去bootstrap官網copy一個模態框的代碼，把里面的內容那塊抽取出來做我們這個遠程頁面是最適合的了。 我准備的代碼如下：
<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">添加用戶</h4>
</div>
<div class="modal-body">
<form id="addForm">
<div class="form-group">
<label for="account">賬號</label>
<input type="text" class="form-control" id="account" name="account" placeholder="賬號（用於登錄）">
</div>
<div class="form-group">
<label for="username">用戶名</label>
<input type="text" class="form-control" id="username" name="username" placeholder="用戶名">
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="resetBtn" class="btn btn-default" >重置</button>
<button type="button" id="saveBtn" class="btn btn-primary">提交</button>
</div>
24
1
<div class="modal-header">
2
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
3
<h4 class="modal-title">添加用戶</h4>
4
</div>
5
<div class="modal-body">
6
<form id="addForm">
7
<div class="form-group">
8
<label for="account">賬號</label>
9
<input type="text" class="form-control" id="account" name="account" placeholder="賬號（用於登錄）">
10
</div>
11
<div class="form-group">
12
<label for="username">用戶名</label>
13
<input type="text" class="form-control" id="username" name="username" placeholder="用戶名">
14
</div>
15
<div class="form-group">
16
<label for="password">密碼</label>
17
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
18
</div>
19
</form>
20
</div>
21
<div class="modal-footer">
22
<button type="button" id="resetBtn" class="btn btn-default" >重置</button>
23
<button type="button" id="saveBtn" class="btn btn-primary">提交</button>
24
</div>
二、后台的介紹
其實后台代碼沒什么介紹的，當點擊主頁面的按鈕后，后台接收到這個請求，把准備好的頁面返回過去就ok。用SpringMvc一下就實現。故不介紹。
三、最終效果
通過點擊主頁面的新增按鈕，彈出了模態框，並把遠程的頁面加載到了遠程模態框里面。
四、解決下小bug
（1）經過測試，發現這個模態窗的內容重后台加載一次后，再關閉這個模態窗再打開時不會再從后台加載。
（2）這個模態框里面的內容在加載后就留在了主頁面上，主頁面可以直接訪問。這樣容易出現問題，如：主頁中有個dom元素的id和模態框里面的dom元素的id相同，這就容易出bug，我們希望模態窗關閉后直接把模態窗里面的內容都清除掉。
解決上面2個bug的方案見下面這段js代碼，其實是監聽了模態窗的關閉
// 每次隱藏時，清除數據，確保不會和主頁dom元素沖突。確保點擊時，重新加載。
$("#showModal").on("hidden.bs.modal", function() {
// 這個#showModal是模態框的id
$(this).removeData("bs.modal");
$(this).find(".modal-content").children().remove();
});
1
// 每次隱藏時，清除數據，確保不會和主頁dom元素沖突。確保點擊時，重新加載。
2
$("#showModal").on("hidden.bs.modal", function() {
3
// 這個#showModal是模態框的id
4
$(this).removeData("bs.modal");
5
$(this).find(".modal-content").children().remove();
6
});
五、說下注意事項
要注意的是遠程加載的這個頁面其實是一小段html代碼，它不需要單獨的引入js和css（如bootstrap的js和css）。這和使用Iframe方式是完全不同的，Iframe里面的內容可以看成是個單獨的頁面，所以使用Iframe時需要自己引入js和css。