項目問題如下圖，
點擊確定后，模態框沒反應，按理，點擊刪除按鈕時，彈出確認刪除的模態框，點擊確定后，使用ajax請求服務器，把數據庫中對應的數據進行刪除，根據服務器 servlet返回的狀態值（delTag的值），來確定是否刪除成功，delTag為true,刪除成功，此時應執行語句 $('#deleteMessModal').modal('hide'); 把模態框關掉，但是調試時怎么頁關閉不掉，F12進入調試模式，轉到console里面一看，報錯了: Uncaught TypeError: $(...).modal is not a function, 看到網上有人說可能時jquer.js 和 bootstrap.js引入的順序有關，到head標簽中一看，果然，bootstrap.js 確實在jquery.js的前面引入的，於是調換位置再試，結果沒有再報錯了，回到頁面調試，彈出的模態框也能正常關掉了！
1 <!--留言管理 模塊--> 2 <script type="text/javascript"> 3 //留言分頁顯示 4 var currentPage;//當前頁碼 5 var prePage;//上一頁 6 var nextPage;//下一頁 7 var totalPageCount;//總頁碼 8 var selectedPage;//下拉列表選中值 9 var messsDelId; //要刪除的留言編號值 10 var $row; 11 $(document).ready(function(){ 12 //初次進入顯示列表 13 $("#messDiv").click(function(){ 14 loadMess(1); 15 }); 16 //下拉列表選擇事件 17 $("#selMessPage").bind("change",function(){ 18 selectedPage=$("#selMessPage").val(); 19 loadMess(selectedPage);//加載選中頁 20 }); //end of $("#selMessPage").bind 21 //向前翻頁 22 $("#prePageMess").click(function(){ 23 loadMess(prePage); 24 }); 25 //向后翻頁 26 $("#nextPageMess").click(function(){ 27 if(nextPage>totalPageCount){ 28 nextPage=totalPageCount; 29 } 30 loadMess(nextPage); 31 }); 32 33 //刪除留言 34 $("#deleteMessConfirm").click(function(){ 35 //alert("當前按鈕對應的評論編號："+messsDelId); 36 $.ajax({ 37 "url":"http://localhost:8080/tiantmusic/MessageList.do", 38 "type":"post", 39 "async":"true", 40 "dataType":"JSON", 41 "data":{"messsDelId":messsDelId,"c":"messDel"}, 42 "success":delSuccess, 43 "error":function(){alert("刪除失敗");} 44 }); 45 46 }); 47 48 function delSuccess(delTag){ 49 if(delTag==true){ 50 //alert("刪除成功"); 51 loadMess(1);//刷新頁面顯示 52 $('#deleteMessModal').modal('hide'); 53 /*js/bootstrap.min.js的引入必須放在jquery.js的后面，modal(hide)才能正常使用 */ 54 } 55 } 56 57 58 59 }); //end of $(document).ready(function()) 60 61 62 function loadMess(currentPage){ 63 $.ajax({ 64 "url":"http://localhost:8080/tiantmusic/MessageList.do", 65 "type":"post", 66 "async":"true", 67 "data":{"currentPage":currentPage,"c":"messPage"}, 68 "success":showMess, 69 "dataType":"json", 70 "error":function(){alert("加載留言信息失敗！");} 71 });//end of $.ajax 72 73 }//end of loadMess() 74 75 76 function showMess(data){ 77 78 $("#messTable").html("");//清空顯示區域 79 currentPage=data.currentPage;//獲取當前頁，前后頁，總頁數 80 prePage = data.prePage; 81 nextPage = data.nextPage; 82 totalPageCount=data.totalPageCount; 83 $("#totalPageCount").text("共"+totalPageCount+"頁");//寫入總頁數 84 $("#selMessPage").html(""); 85 for(var i=1;i<=totalPageCount;i++){ //設置下拉列表選項 86 var $option=$("<option value='"+i+"'>"+i+"</option>"); 87 $("#selMessPage").append($option); 88 } 89 $("#selMessPage").find("option[value='"+currentPage+"']").attr("selected","selected"); //設置默認選中 90 $.each(data.list,function(i,item){ 91 //console.log(item.messId,item.userName,item.submitTime,item.messContent); 92 $row = $("<div class='row' id='messRowId' value='"+(i+1)+"'>"+ 93 "<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2' id='messDelId' text='"+item.messId+"' >"+item.messId+"</div>"+ 94 "<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2'>"+item.userName+"</div>"+ 95 "<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2'>"+item.submitTime+"</div>"+ 96 "<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4'>"+item.messContent+"</div>"+ 97 "<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2' >"+ 98 "<button class='btn btn-success btn-xs' data-toggle='modal' data-target='#changeSource'>修改</button> "+ 99 "<button class='btn btn-danger btn-xs' data-toggle='modal' data-target='#deleteMessModal' id='delMessBtn"+(i+1)+"' value='"+(i+1)+"' text='"+item.messId+"'>刪除</button>"+ 100 "</div>"+ 101 "</div>"); 102 $("#messTable").append($row); 103 $("#delMessBtn"+(i+1)+"").click(function(){//刪除按鈕事件綁定--獲取當前按鈕對應的評論編號值 104 messsDelId=item.messId; 105 }); 106 107 });//end of $.each() 108 109 }//end of showMess 110 111 112 113 </script> 114 <div role="tabpanel" class="tab-pane" id="stud"> 115 <div class="check-div form-inline"> 116 <div class="col-xs-5"> 117 <input type="text" class=" form-control input-sm" placeholder="輸入文字搜索" style=" !height: 40px!important;"> 118 <button class="btn btn-white btn-xs ">查 詢 </button> 119 </div> 120 121 122 </div> 123 <div class="data-div"> 124 <div class="row tableHeader"> 125 <div class="col-xs-2 "> 126 編號 127 </div> 128 <div class="col-xs-2 "> 129 用戶名 130 </div> 131 <div class="col-xs-2"> 132 時間 133 </div> 134 <div class="col-xs-4"> 135 內容 136 </div> 137 <div class="col-xs-2"> 138 操作 139 </div> 140 141 142 </div> 143 <!-- 評論信息顯示區域 #messTable --> 144 <div class="tablebody" id="messTable"> 145 </div> 146 147 </div> 148 <!--留言管理區頁碼塊--> 149 <footer class="footer"> 150 <ul class="pagination"> 151 <li> 152 <select id="selMessPage"> 153 <!-- 下拉列表選項值設置區域 --> 154 </select> 155 頁 156 </li> 157 <!-- 總頁數設置區域 --> 158 <li class="gray" id="totalPageCount"> 159 160 </li> 161 <li> 162 <i class="glyphicon glyphicon-menu-left" id="prePageMess" > 163 </i> 164 </li> 165 <li> 166 <i class="glyphicon glyphicon-menu-right" id = "nextPageMess" > 167 </i> 168 </li> 169 </ul> 170 </footer> 171 172 <!--刪除留言模塊--> 173 <div class="modal fade" id="deleteMessModal" role="dialog" aria-labelledby="gridSystemModalLabel"> 174 <div class="modal-dialog" role="document"> 175 <div class="modal-content"> 176 <div class="modal-header"> 177 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 178 <h4 class="modal-title" id="gridSystemModalLabel">提示</h4> 179 </div> 180 <div class="modal-body"> 181 <div class="container-fluid"> 182 確定要刪除該條留言？刪除后不可恢復！ 183 </div> 184 <span id="delMessSuccess_span"></span> 185 </div> 186 187 <div class="modal-footer"> 188 <!-- <input type="hidden" id="messDelId1" text="$('#messDelId').attr('text')"> --> 189 <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button> 190 <button type="button" class="btn btn-xs btn-danger" id="deleteMessConfirm">確 定</button> 191 </div> 192 </div> 193 <!-- /.modal-content --> 194 </div> 195 <!-- /.modal-dialog --> 196 </div> 197 <!-- /.modal -->
參考鏈接：http://blog.csdn.net/u011039332/article/details/49615025
下邊是參考連接中的一些內容：
