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 ...
随机推荐
- php面试专题---12、JavaScript和jQuery基础考点
php面试专题---12.JavaScript和jQuery基础考点 一.总结 一句话总结: 比较常考察的是JavaScript的HTML样式操作以及jQuery的选择器和事件.样式操作. 1.下列不 ...
- python使用中遇到的一些问题
一./usr/bin/ld:cannot find -lxxx错误 例如出现了问题: /usr/bin/ld:cannot find -lssl 其中xxx表示函式库文件名称,如上面的libssl.s ...
- Windows 环境下vue+webpack前端开发环境搭建
一.开发环境搭建 1.前端框架一般依赖node.js,我们首先要安装node.js. 2.由于许多npm 的源都在国外的地址,安装起来特别慢,所以我们这里利用淘宝的镜像服务器. 安装命令为:npm i ...
- Ubuntu 18.04 截图工具 Shutter（可以标记重点）-安装及使用
Shutter 是一个功能丰富的屏幕截图程序.您可以屏幕的某个特定区域.特定的窗口. 或者是整个屏幕,甚至一整个网站截图.可以对截图应用各种效果,标记重点,然后上 传到一个图片托管网站——所有的任务在 ...
- python web自动化测试框架搭建(功能&接口)——接口用例实现
测试用例基类: # coding=utf-8 import unittest import Logger log = Logger.Loger() class BaseCase(unittest.Te ...
- Nginx 转写功能和Apache .htaccess 对应
之前一直使用apache 服务器,现有一项目想转到Nginx 服务器运行.. 发现Apache 的撰写功能和 Nginx的不一样.无法通用.hataccess 文件 查阅网上资料,nginx 配置转写 ...
- Python笔记(十二)_文件
文件的打开模式 'r':以只读的方式打开文件(默认) 'w':以写入的方式打开文件,会覆盖已存在的文件 'x':用写入的方式打开文件,如果文件已存在,会抛出异常 'a':用写入的方式打开文件,如果文件 ...
- Communications link failure mysql自动停止 连接拒绝 mysqld dead but sub。。。
服务器环境中 JAVA 连接数据库 Communications link failure, Contection refused 网上很多这种情况,解决基本上是将127.0.0.1换成localho ...
- mybatis输出映射总结
使用resultType作为输出映射 只有查询出来的列名和pojo中的属性名一致时,才会映射成功, 如果不一致,可以使用resultMap最为输出类型 不管是输出单个对象还是列表(list中包括poj ...
- css 绘制checkbox,radio
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...