bootstrap 模態框的動態複用

在bootstrap文件中，模態框是由 data-toggle="modal" data-target="#myModal" 這兩個屬性的div，通過點選此div觸發的，很多時候都會用到的模態框，這時候直接複用就方便多了

1、先看模態框HTML程式碼

 1 <!-- 模態框（Modal） -->
 2 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 3
 
     <div class="modal-dialog">
 4         <div class="modal-content">
 5             <div class="modal-header">
 6                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 7                 <h3 class="modal-title"
 
 id="myModalLabel">操作</h3>
 8             </div>
 9             <div class="modal-body" style="overflow-y: visible; margin-bottom: 0px;">請選擇您要進行的操作？</div>
10             <div class="modal-footer" style="margin-top: 0px; display: block;">
11                 <a class="btn btn-default"
 
 id="myModelLogin" href="" target="_blank">登入到<span id="myModelSystem"></span>系統</a>
12                 <a class="btn btn-default" href="org/admin">去錄單</a>
13                 <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
14             </div>
15         </div>
16     </div>
17 </div>

2、通過繫結的class來手動觸發，因為動態生成的div元素有很多，類選擇器很合適，當然使用這種觸發方式，data-toggle="modal" data-target="#myModal" 就用不到了

1 <td>
2     {foreach $item['jobs'] as $value}
3     <div class="pull-left t2 clickmodel" data-system="{$item.name}" data-login="{$value.login_url}?username={$value.job_no}">
4         <small class="badge loginLi sp_color_9850" style="display: inline-block;">
5             <span>{$value.job_no}</span>
6         </small>
7     </div>
8     {/foreach}
9 </td>

此處是通過data-system和data-login自定義的兩個屬性，在下面能用到

3、下面是觸發模組框，並實現動態繫結屬性

 1 var system_name = '';
 2 var login_url = '';
 3 
 4 $('.clickmodel').bind('click',function () {
 5     system_name = $(this).data('system');
 6     login_url = $(this).data('login');
 7     $('#myModal').modal("show"); // 觸發模態框
 8 });
 9 
10 // 在呼叫 show 方法後觸發。
11 $("#myModal").on("show.bs.modal", function () {
12     $('#myModelSystem').text(system_name);
13     $('#myModelLogin').attr('href',login_url);
14 });

注意的是，system_name和login_url必須是全域性變數，不然在show.bs.model中會取不到

最後是效果，點選任意一個工號，都會出現模態框