注意使用modal的时候最外层多套了一个div，因为如果一个页面定义两个modal时，另一个弹不出来，原因不明。
js显示弹窗
$("#listModal").modal({backdrop:false});
html定义弹窗
<!-- 模态框（Modal） -->
<div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">手续费配置</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="form_data" action="${ctx}/fee/update.shtml">
<div class="form-group">
<label for="inputName" class="col-sm-3 control-label">渠道:</label>
<input type="hidden" name="id">
<input type="hidden" name="channelId">
<div class="col-sm-5">
<input type="text" class="form-control input-sm" name="channel_name" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">金额:</label>
<div class="col-sm-5">
<input type="text" class="form-control input-sm" name="amount" >
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-3 control-label">文案:</label>
<div class="col-sm-5">
<input type="text" class="form-control input-sm" name="copyWriter" >
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-3 control-label">有效期至:</label>
<div class="col-sm-5">
<input type="text" class="form-control input-sm" name="validDate" id="datepicker">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="validateBtn" type="submit" class="btn btn-primary">提交更改 </button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
效果图
image.png
form使用相关链接至
