bootstrap的模态框还是很好用的。
之前做了一个项目,对modal有一点理解,现在记录一下,希望对大家有帮助。
首先让大家看看项目中modal的效果。
如上图1,我们点击删除图书,会弹出图2,如下:
点击确定,会删除图书,同时会再次加载主界面(当然,你就看不到刚才已经删除的那本书了),如果点击取消,就直接关闭modal。
OK 咱们先解释这个效果的实现。
删除图书的按钮的html如下:
<button type="button" onclick="open_del_modal(${recoreds.isbn})"
class="btn btn-xs btn-danger">删除图书</button>
那个弹出的modal代码如下:
<!-- 删除图书 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>删除数据?</h3>
</div>
<div class="modal-body">
<div id="sure_del"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="deleteid" isbn="delete_isbn"
onclick="doDel(this)">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
open_del_modal这个js如下:
function open_del_modal(isbn){
$("#sure_del").text("确认删除isbn号为: "+isbn+" 的图书么?");
$("#deleteid").attr("isbn",isbn);
//可以理解为启动id为deleteModal的那个modal
$("#deleteModal").modal();
}
点击确定后,的doDel如下
function doDel(a){
//alert($(a).attr("isbn"));
$.get(
"delbook",
{'isbn':$(a).attr("isbn")},
function(data,status){
$("。deleteModal").modal("hide");
parent.location.href="search_field.jsp";
});
}
在 function(data,status)里面,可以判断返回的参数
我这里没有判断,就直接重新加载了页面。
恩,我的行文理念是,你按着我的步骤来,你就一定能把东西做出来,至于里面的技术难点,咱们后面再讨论。
先让车子跑起来,再去考虑它具体怎么实现的。
另外,关于删除图片这效果,我个人认为,还可以使用sweetalert来实现。
http://www.dglives.com/demo/sweetalert-master/example/ 它的技术,大家自己去探索吧。
那删除图书的技术难度在什么地方?
恩...我想想额,好像没有技术难度呀。
现在说第二个效果
点击修改图书:
如图3
点击提交修改,就提交修改,然后关闭模态框,点击放弃修改,就直接关闭模态框。
这里面的核心逻辑,就是动态的设定弹出的模态框的内容。
修改图书按钮的html如下
<a href="get_one?isbn=${recoreds.isbn}" data-toggle="modal" data-target="。updateModal"
<button type="button" class="btn btn-xs btn-warning">修改图书</button></a>
对应的updateModal如下
<!-- 修改图书 -->
<div id="updateModal" class="modal fade">
<div class="modal-dialog" role="document" style="width: 40%;">
<div class="modal-content">
</div>
</div>
</div>
get_one?isbn=${recoreds.isbn}返回一个jsp,内容就自动加载到updateModal的modal-content
就这么简单。
data-toggle="modal" data-target="。updateModal"
那么a元素里出现的这两个参数是什么意思?
其实我也不懂,看网上的说法,data-toggle就是说把a这个元素变成modal这个元素。data-target就是说对象就是updateModal。
我自己是主要搞后端的,其实,个人感觉像前端这些东西,知道怎么做能达到效果,哪些参数和哪些参数对应。就可以了。
et_one?isbn=${recoreds.isbn}返回的内容如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>毕加数据</title>
<meta http-equiv="Cache-Control" content="max-age=10000">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css" type="text/css" />
</head>
<body>
<style>
td {
vertical-align: middle;
text-align: center;
align:center;
valign:center;
}
</style>
<form action="update_book">
<table align="center" border='1' cellspacing="0" cellpadding="0"
style="margin-top: 5%; margin-bottom: 5%;">
<tr>
<td colspan="2">
<h2>${book.title}</h2>
</td>
</tr>
<tr>
<td >目录信息: </td>
<td>
<textarea name="catalog"
style="width: 398px; margin: 0px; height: 152px;">${book.catalog}</textarea>
</td>
</tr>
<tr>
<td colspan=2>
<button class="btn btn-primary" type="submit" >提交修改 </button>
<button class="btn btn-success" data-dismiss="modal" >放弃修改 </button>
</td>
</tr>
</table>
</form>
</body>
</html>
最后整个页面的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>标题</title>
<meta http-equiv="Cache-Control" content="public">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
</head>
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet">
<link href="<%=basePath%>css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>css/sweet-alert.css" rel="stylesheet" type="text/css">
<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>
<script src="<%=basePath%>js/fileinput.min.js" type="text/javascript"></script>
<script src="<%=basePath%>js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap.min.js" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-modal.js" type="text/javascript"></script>
<script src="<%=basePath%>js/jquery.bootpag.js"></script>
<script src="<%=basePath%>js/sweet-alert.js"></script>
<body>
<div class="panel panel-default">
<div class="panel-heading">书籍信息</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th width="20%">书名</th>
<th width="20%">作者</th>
<th>出版社</th>
<th>出版年</th>
<th>10位isbn</th>
<th>13位isbn</th>
<th>定价</th>
<th>售价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tbody>
<c:forEach items="${list}" var="recoreds" varStatus="s">
<c:choose>
<c:when test="${s.index%2 == '0'}">
<tr>
</c:when>
<c:otherwise>
<tr bgcolor="#CCFFFF">
</c:otherwise>
</c:choose>
<td><c:out value="${s.index+1+(currentPage-1)*30}" /></td>
<td><c:out value="${recoreds.title}" /></td>
<td><c:out value="${recoreds.author}" /></td>
<td><c:out value="${recoreds.publisher}" /></td>
<td><c:out value="${recoreds.pubdate}" /></td>
<td><c:out value="${recoreds.isbn10}" /></td>
<td><c:out value="${recoreds.isbn}" /></td>
<td><c:out value="${recoreds.price}" /></td>
<td><c:out value="${recoreds.sale_price}" /></td>
<td><a href="get_one?isbn=${recoreds.isbn}"
data-toggle="modal" data-target="#updateModal"
<button type="button" class="btn btn-xs btn-warning">修改图书</button></a>
<button type="button" onclick="open_del_modal(${recoreds.isbn})"
class="btn btn-xs btn-danger">删除图书</button></td>
</tr>
</c:forEach>
</tbody>
</table>
<div style="float: right;">
<div style="float: right;" id="page-selection"></div>
<div style="float: right;">
<div style="padding-top: 20px; padding-right: 20px;">
<font size='5'>总计${totalCount} </font>
</div>
</div>
</div>
<div style="float: left;">
<button style="margin-top: 22px; margin-left: 31px;"
class="btn btn-primary pull-right">下载文件</button>
</div>
<div style="float: left;">
<button style="margin-top: 22px; margin-left: 31px;"
onclick="top.location.href='isbn_upload.jsp';"
class="btn btn-primary ">上传isbn数据</button>
</div>
<div style="float: left;">
<button style="margin-top: 22px; margin-left: 31px;"
onclick="createCSV()" class="btn btn-primary ">导出csv</button>
</div>
<div style="float: left;">
<button style="margin-top: 22px; margin-left: 31px;"
onclick="top.location.href='csv_upload.jsp';"
class="btn btn-primary ">导入CSV数据</button>
</div>
<div style="float: left;">
<button style="margin-top: 22px; margin-left: 31px;"
onclick="top.location.href='excel_upload.jsp';"
class="btn btn-primary ">导入Excel数据</button>
</div>
<a href="../task_log/getlog" data-toggle="modal"
data-target="#myModal"
<button style="margin-top: 22px; margin-left: 31px;"
class="btn btn-primary ">查看失败isbn记录</button></a>
</div>
</div>
</div>
<!-- 查看失败记录 -->
<div id="myModal" class="modal fade">
<div class="modal-dialog" role="document" style="width: 60%;">
<div class="modal-content"></div>
</div>
</div>
<!-- 修改图书 -->
<div id="updateModal" class="modal fade">
<div class="modal-dialog" role="document" style="width: 40%;">
<div class="modal-content"></div>
</div>
</div>
<!-- 删除图书 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>删除数据?</h3>
</div>
<div class="modal-body">
<div id="sure_del"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="deleteid"
isbn="delete_isbn" onclick="doDel(this)">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</body>
<!-- jQuery -->
<script type="text/javascript">
$("#updateModal").on("hidden.bs.modal", function() {
$(this).removeData();
});
function open_del_modal(isbn){
$("#sure_del").text("确认删除isbn号为: "+isbn+" 的图书么?");
$("#deleteid").attr("isbn",isbn);
$("#deleteModal").modal();
}
function doDel(a){
//alert($(a).attr("isbn"));
$.get(
"delbook",
{'isbn':$(a).attr("isbn")},
function(data,status){
$("#deleteModal").modal("hide");
parent.location.href="search_field.jsp";
});
}
function createCSV(){
alert("已经提交到后台,稍后请到工作记录总下载CSV文件");
var url="createcsv?";
var title= jQuery('#title',window.parent.document).val();
url+="&title="+encodeURI(encodeURI(title));
var isbn2=jQuery('#isbn',window.parent.document).val();
url+="&isbn="+encodeURI(encodeURI(isbn2));
var publisher=jQuery('#publisher',window.parent.document).val();
url+="&publisher="+encodeURI(encodeURI(publisher));
var author=jQuery('#author',window.parent.document).val();
url+="&author="+encodeURI(encodeURI(author));
$.post(url);
}
$('#page-selection').bootpag({
total: ${totalPage},
page: ${currentPage},
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page", function(event,num) {
var url="getbook?currentPage=" + num ;
var title= jQuery('#title',window.parent.document).val();
url+="&title="+encodeURI(encodeURI(title));
var isbn2=jQuery('#isbn',window.parent.document).val();
url+="&isbn="+encodeURI(encodeURI(isbn2));
var publisher=jQuery('#publisher',window.parent.document).val();
url+="&publisher="+encodeURI(encodeURI(publisher));
var author=jQuery('#author',window.parent.document).val();
url+="&author="+encodeURI(encodeURI(author));
url+="&time_start="+jQuery('#time_start',window.parent.document).val();
url+="&time_end="+jQuery('#time_end',window.parent.document).val();
url+="&a=a";
// location.href = encodeURI(url);
location.href = url;
});
</script>
</html>
