一般我们的web页面有时候都需要form提交,或者提示其他信息,此时,bootstarp中的模态框就是一个很好的解决方案,form表单有需要的时候就点击出来,灰常不错!。 常见的模态框 只能显示一个,其他的无法显示,是显示暗灰页面,又或者显示的模态框是另一个的模态框显示的信息。错误的那些页面就不显示了。现在说一下解决方法,可能遇到的问题就是这个呢!
看HTML注释
<!--在头和尾上在外嵌一个div标签-->
<div>
<!--在头和尾上在外嵌一个div标签-->
<!--data-target="#Modal${equipment.id}" 修改id 修改id!!!!!! 把对应的位置改成一致,即可完成!!!!-->
<button type="button" class="btn btn-block btn-info " data-toggle="modal" data-target="#Modal${equipment.id}" data-whatever="@mdo">修改器材信息</button>
<div class="modal fade" id="Modal${equipment.id}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<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="exampleModalLabel">修改器材信息</h4>
</div>
<div class="modal-body">
<form method="post" action="${pageContext.request.contextPath}/admin_page/?method=ModifyEquipment ">
<div class="form-group">
<label for="id" class="control-label">器材ID:</label>
<input type="text" class="form-control" id="id" value="${equipment.id}" name="id" readonly>
</div>
<div class="form-group">
<label for="variety" class="control-label">器材种类:</label>
<select class="form-control" id="variety" name="variety" >
<option value="${equipment.variety}">${equipment.variety}</option>
<option value="文具类">文具类</option>
<option value="电工类">电工类</option>
<option value="计算机类">计算机类</option>
<option value="物联网设备类">物联网设备类</option>
</select>
<%--<input type="text" class="form-control" id="variety" name="variety" value="${equipment.variety}">--%>
</div>
<div class="form-group">
<label for="name" class="control-label">器材名称:</label>
<input type="text" class="form-control" id="name" name="name" value="${equipment.name}">
</div>
<div class="form-group">
<label for="intro" class="control-label">器材简介:</label>
<input type="text" class="form-control" id="intro" name="intro" value="${equipment.intro}">
</div>
<div class="form-group">
<label for="money" class="control-label">器材金额(份):</label>
<input type="text" class="form-control" id="money" name="money" value="${equipment.money}">
</div>
<div class="form-group">
<label for="deposit_address" class="control-label">器材存放位置:</label>
<input type="text" class="form-control" id="deposit_address" name="deposit_address" value="${equipment.deposit_address}">
</div>
<div class="form-group">
<label for="total_quantity" class="control-label">器材总数:</label>
<input type="text" class="form-control" id="total_quantity" name="total_quantity" value="${equipment.total_quantity}">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">器材损坏数量:</label>
<input type="text" class="form-control" id="recipient-name" name="damage_quantity" value="${equipment.damage_quantity}">
</div>
<div class="form-group">
<label for="damage_quantity" class="control-label">器材借出数量:</label>
<input type="text" class="form-control" id="damage_quantity" name="number_of_lent" value="${equipment.number_of_lent}">
</div>
<div class="form-group">
<label for="number_of_lent" class="control-label">器材剩余数量:</label>
<input type="text" class="form-control" id="number_of_lent" name="surplus" value="${equipment.surplus}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">确认添加</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--在头和尾上在外嵌一个div标签-->
</div>
<!--在头和尾上在外嵌一个div标签-->