项目问题如下图，
点击确定后，模态框没反应，按理，点击删除按钮时，弹出确认删除的模态框，点击确定后，使用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
下边是参考连接中的一些内容：
