最近在做毕设的时候遇到一个问题,困扰了很久:如何向模态框传递img的路径,以在模态框显示照片。
其他信息可通过设置input的id,通过javascript设置value值,但是img不能通过这样的方法实现。
终于,今天看到一篇用模态框实现点击放大图片的博文,找到了方法!记录一下。
JSP页面(显示session中获取到的用户信息):
<table class= "table table-bordered">
<thead>
<th>编号</th>
<th>昵称</th>
<th>姓名</th>
<th>性别</th>
<th>出生年月</th>
<th>入职日期</th>
<th>联系电话</th>
<th>操作</th>
</thead>
<tbody>
<s:iterator value="#session.pageBean.list" var="temp">
<tr>
<td>${id}</td>
<td>${username}</td>
<td>${name}</td>
<td>${sex}</td>
<td>${birthday}</td>
<td>${entrytime}</td>
<td>${phone}</td>
<td>
<a type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" onclick="Values(${id},'${username}',${birthday},'${name}','${phone}','${sex}','${img}','${entrytime}','${Info}')">查看</a>
<a href="coach_preEdit?id=${id}" class="btn btn-success btn-xs" >编辑</a>
<a href="coach_delete?id=${id}" class="btn btn-warning btn-xs">注销</a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
通过点击按钮,触发模态框,在模态框显示该用户的详细信息。
<a type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" onclick="Values(${id},'${username}',${birthday},'${name}','${phone}','${sex}','${img}','${entrytime}','${Info}')">查看</a>
模态框代码:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- ×是关闭窗口的X-->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">教练信息</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-condensed" >
<tbody>
<tr>
<th>编号:</th><td colspan="2" ><input type="text" disabled="disabled" id="id" size="10"/></td>
<th >昵称:</th><td colspan="2"><input type="text" disabled="disabled" id="username" size="10" style="border: none;background-color:transparent;"/></td>
<td rowspan="4" width="128">
<div >
<img id="img" class="img-responsive" style="width: 128px;height: 128px">
</div>
</td>
</tr>
<tr>
<th>姓名:</th><td colspan="2"><input type="text" disabled="disabled" id="name" size="10"/></td>
<th>性别:</th><td colspan="2"><input type="text" disabled="disabled" id="sex" size="10" style="border: none;background-color:transparent;"/></td>
</tr>
<tr>
<th>出生年月:</th><td colspan="2"><input type="text" disabled="disabled" id="birthday" size="10" style="border: none;background-color:transparent;"/></td>
<th>电话:</th><td colspan="2"><input type="text" disabled="disabled" id="phone" size="10" style="border: none;background-color:transparent;"/></td>
</tr>
<tr>
<th>入职日期:</th><td><input type="text" disabled="disabled" id="entrytime" size="10" style="border: none;background-color:transparent;"/></td>
</tr>
<tr>
<th>评价:</th>
<td colspan="6">
<input type="text" disabled="disabled" id="Info" >
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
javascript代码:
<script>
$("#myModal").modal("hide");
function Values(id,username,birthday,name,phone,sex,img,entrytime,Info){
$("#id").val(id);
$("#username").val(username);
$("#birthday").val(birthday);
$("#name").val(name);
$('#sex').val(sex);
$("#phone").val(phone);
$("#entrytime").val(entrytime);
$("#Info").val(Info);
var imgModel = document.getElementById("img");
imgModel.src = "../img/"+img;
}
</script>