bootstrap 点击模态框上的提交按钮后，模态框不能关闭的解决办法
项目问题如下图，
点击确定后，模态框没反应，按理，点击删除按钮时，弹出确认删除的模态框，点击确定后，使用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的前面引入的，于是调换位置再试，结果没有再报错了，回到页面调试，弹出的模态框也能正常关掉了！
<!--留言管理 模块-->
<script type="text/javascript">
//留言分页显示
var currentPage;//当前页码
var prePage;//上一页
var nextPage;//下一页
var totalPageCount;//总页码
var selectedPage;//下拉列表选中值
var messsDelId; //要删除的留言编号值
var $row;
$(document).ready(function(){
//初次进入显示列表
$("#messDiv").click(function(){
loadMess(1);
});
//下拉列表选择事件
$("#selMessPage").bind("change",function(){
selectedPage=$("#selMessPage").val();
loadMess(selectedPage);//加载选中页
}); //end of $("#selMessPage").bind
//向前翻页
$("#prePageMess").click(function(){
loadMess(prePage);
});
//向后翻页
$("#nextPageMess").click(function(){
if(nextPage>totalPageCount){
nextPage=totalPageCount;
}
loadMess(nextPage);
}); //删除留言
$("#deleteMessConfirm").click(function(){
//alert("当前按钮对应的评论编号："+messsDelId);
$.ajax({
"url":"http://localhost:8080/tiantmusic/MessageList.do",
"type":"post",
"async":"true",
"dataType":"JSON",
"data":{"messsDelId":messsDelId,"c":"messDel"},
"success":delSuccess,
"error":function(){alert("删除失败");}
}); }); function delSuccess(delTag){
if(delTag==true){
//alert("删除成功");
loadMess(1);//刷新页面显示
$('#deleteMessModal').modal('hide');
/*js/bootstrap.min.js的引入必须放在jquery.js的后面，modal(hide)才能正常使用 */
}
} }); //end of $(document).ready(function()) function loadMess(currentPage){
$.ajax({
"url":"http://localhost:8080/tiantmusic/MessageList.do",
"type":"post",
"async":"true",
"data":{"currentPage":currentPage,"c":"messPage"},
"success":showMess,
"dataType":"json",
"error":function(){alert("加载留言信息失败！");}
});//end of $.ajax }//end of loadMess() function showMess(data){ $("#messTable").html("");//清空显示区域
currentPage=data.currentPage;//获取当前页，前后页，总页数
prePage = data.prePage;
nextPage = data.nextPage;
totalPageCount=data.totalPageCount;
$("#totalPageCount").text("共"+totalPageCount+"页");//写入总页数
$("#selMessPage").html("");
for(var i=1;i<=totalPageCount;i++){ //设置下拉列表选项
var $option=$("<option value='"+i+"'>"+i+"</option>");
$("#selMessPage").append($option);
}
$("#selMessPage").find("option[value='"+currentPage+"']").attr("selected","selected"); //设置默认选中
$.each(data.list,function(i,item){
//console.log(item.messId,item.userName,item.submitTime,item.messContent);
$row = $("<div class='row' id='messRowId' value='"+(i+1)+"'>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2' id='messDelId' text='"+item.messId+"' >"+item.messId+"</div>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2'>"+item.userName+"</div>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2'>"+item.submitTime+"</div>"+
"<div class='col-lg-4 col-md-4 col-sm-4 col-xs-4'>"+item.messContent+"</div>"+
"<div class='col-lg-2 col-md-2 col-sm-2 col-xs-2' >"+
"<button class='btn btn-success btn-xs' data-toggle='modal' data-target='#changeSource'>修改</button> "+
"<button class='btn btn-danger btn-xs' data-toggle='modal' data-target='#deleteMessModal' id='delMessBtn"+(i+1)+"' value='"+(i+1)+"' text='"+item.messId+"'>删除</button>"+
"</div>"+
"</div>");
$("#messTable").append($row);
$("#delMessBtn"+(i+1)+"").click(function(){//删除按钮事件绑定--获取当前按钮对应的评论编号值
messsDelId=item.messId;
}); });//end of $.each() }//end of showMess </script>
<div role="tabpanel" class="tab-pane" id="stud">
<div class="check-div form-inline">
<div class="col-xs-5">
<input type="text" class=" form-control input-sm" placeholder="输入文字搜索" style=" !height: 40px!important;">
<button class="btn btn-white btn-xs ">查 询 </button>
</div> </div>
<div class="data-div">
<div class="row tableHeader">
<div class="col-xs-2 ">
编号
</div>
<div class="col-xs-2 ">
用户名
</div>
<div class="col-xs-2">
时间
</div>
<div class="col-xs-4">
内容
</div>
<div class="col-xs-2">
操作
</div> </div>
<!-- 评论信息显示区域 #messTable -->
<div class="tablebody" id="messTable">
</div> </div>
<!--留言管理区页码块-->
<footer class="footer">
<ul class="pagination">
<li>
<select id="selMessPage">
<!-- 下拉列表选项值设置区域 -->
</select>
页
</li>
<!-- 总页数设置区域 -->
<li class="gray" id="totalPageCount"> </li>
<li>
<i class="glyphicon glyphicon-menu-left" id="prePageMess" >
</i>
</li>
<li>
<i class="glyphicon glyphicon-menu-right" id = "nextPageMess" >
</i>
</li>
</ul>
</footer> <!--删除留言模块-->
<div class="modal fade" id="deleteMessModal" role="dialog" aria-labelledby="gridSystemModalLabel">
<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="gridSystemModalLabel">提示</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
确定要删除该条留言？删除后不可恢复！
</div>
<span id="delMessSuccess_span"></span>
</div> <div class="modal-footer">
<!-- <input type="hidden" id="messDelId1" text="$('#messDelId').attr('text')"> -->
<button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
<button type="button" class="btn btn-xs btn-danger" id="deleteMessConfirm">确 定</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
参考链接：http://blog.csdn.net/u011039332/article/details/49615025
下边是参考连接中的一些内容：
bootstrap 点击模态框上的提交按钮后，模态框不能关闭的解决办法的更多相关文章
- 移动端开发H5页面点击按钮后出现闪烁或黑色背景的解决办法
H5页面在IOS端测试的时候发现,点击按钮会闪动,出现一个黑色的背景一闪而过,影响用户体验.最后通过度娘,找到解决方法: 就是给点击的元素添加一个CSS属性或者全局添加一个css. -webkit-t ...
- ios上有时候提交按钮点击两次才可以取消输入框软键盘
ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...
- 解决appium点击软键盘上的搜索按钮
在执行appium自动化测试的时候,需要点击软件盘上的搜索按钮. 具体操作步骤如下: 前提:需要事先安装搜狗输入法 1.唤醒软件盘,可以封装到一个类里,用到的时候随时调用. import os#调起s ...
- 新手使用mac上的textedit写HTML时遇到的问题及解决办法
刚开始在mac上学习HTML,总结一下遇到的问题和解决办法 问题:使用textedit编写html,在网页上却仍然显示的是代码. 解决办法: 打开textedit后打开文本编辑 选择偏好设置 按如图所 ...
- 关于Hexo,Next主题的‘下一页’、‘上一页’按钮错误显示为html代码 的解决方法
关于Next主题的'下一页'.'上一页'按钮错误显示为html代码的解决方法 我在建立自己的博客过程中遇到了页面'下一页'和'上一页'按钮显示为html代码<i class="fa f ...
- 【技术贴】解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法
[技术贴]解决myeclipse SVN 提交代码 commit:remains in tree-conflict错误的解决办法 错误是:Aborting commit: xxxxx’ remains ...
- svn提交时提示 Aborting commit: remains in conflict 解决办法，更改svn服务地址
TortoiseSVN客户端如何更改新的URL 问题: 我们的服务器换了新的URL地址,这时候我们本地的SVN访问帐号和地址就要重新定义了. 解决步骤: 1:重新定义SVN的URL,右键(Tortoi ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...
随机推荐
- celery的入门使用
一.安装步骤 二.使用方法 三.和Django结合 四.部署和监控
- ES命令
基础概念 Elasticsearch有几个核心概念.从一开始理解这些概念会对整个学习过程有莫大的帮助. 接近实时(NRT) Elasticsearch是一个接近实时的搜索平台.这意味 ...
- vs2017或vs2019添加引用时报错
我先安装的是vs2019,进入VS命令提示符里后一直说:gacutil 不是有效的命令,一直没能解决,然后直接装了vs2017后,该命令可以使用了, 还是用VS2017吧,2019的版本感觉还有点问题 ...
- docker 部署 tomcat
1.搜索tomcat信息 docker search tomcat 2.下拉tomcat 镜像 docker pull tomcat 3.运行tomcat docker run -d --name=t ...
- leetcode 217. 存在重复元素 （python）
给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3,1]输出: true示 ...
- MySQL 导入导出 CSV 文件
导入 导出 清空表中的所有数据 注意事项 常见问题 ERROR 1290 (HY000): The MySQL server is running with the --secure-file-pri ...
- HTML--JS 获取选择框信息
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Logistic Algorithm分类算法的Octave仿真
本次Octave仿真解决的问题是,根据两门入学考试的成绩来决定学生是否被录取,我们学习的训练集是包含100名学生成绩及其录取结果的数据,需要设计算法来学习该数据集,并且对新给出的学生成绩进行录取结果预 ...
- Notepad++正则表达式合并多行代码为1行
有时候你想要缩减代码行数,多行并1行,像网页流行的JS代码,查看时多见这种情况,但是有时你想把多行switch case缩成1行,再手动分开,每个case一行. 这种对齐方式似乎在日式程序员的代码中经 ...
- jQuery基础--音乐视频操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...