因为项目中用到了bootstrap table 显示表格且要为每一行设置一个按钮要就能查看信息，所以就直接用bootstrap带的模态框，但是有个缺点就是异步的时候比较慢，体验不是特别的好，至于后来换哪种弹框在本文结尾会叙述。
首先，先引入bootstrap.js和.css文件，如果要是跟我一样使用bootstrap table还需要进入table的相关js和css 文件
<link href="/BOLI_JT/static/bootstrap/3.3.4/css_default/bootstrap.min.css" type="text/css" rel="stylesheet" /> <script src="/BOLI_JT/static/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script> <link href=" ${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.css" rel="stylesheet"> <script type="text/javascript" src="${ctxStatic}/bootstrap-table-master/dist/bootstrap-table.min.js"></script> <script src="${ctxStatic}/bootstrap-table-master/src/locale/bootstrap-table-zh-CN.js"></script>###添加按钮
function operateFormatter(value, row, index) { return [ '<button id="adjustButton" type="button" class="btn btn-info btn-xs" style="margin-right:15px;">调整</button>' ].join(''); } window.operateEvents = { "click #adjustButton": function (e, value, row, index) { /* $("#teamId").val(row.teamId); $("#updateTime").val(row.startTime); $("#planIds").val(row.planId); */ $("#myModal").modal({ remote:"${ctx}/plan/blPlanAdjustment/adjustmentForm?id="+row.id }); } };如代码所示，使用.modal()方法就可以为你定义的模态框显示了，其中,remote 中填写的地址返回的是一个页面，这样就可以将该页面加载在modal中了。
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div>这三个div是需要你写在你想触发点击事件的页面中的，然后通过remote就会将页面和数据显示在modal-content中，缺点就是如果你也是这么用的，那么在你要加载进模态框中页面中，用不了form.validate()中的ajaxSubmit，所以只能自己在该页面为按钮设置点击时间，进行相应的操作。别忘了事件要写在 $(function () { });中，否则是不会有效果的。
<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:form id="inputForm" modelAttribute="blPlanAdjustment" method="post" class="form-horizontal"> <form:hidden path="id"/> <sys:message content="${message}"/> <fieldset> <div class="form-group"> <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>计划:</label> <div class="col-sm-4"> <form:input path="planId" value="${blPlanTeam.planId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/> </div> </div> <div class="form-group"> <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>班组:</label> <div class="col-sm-4"> <form:input path="teamId" value="${blPlanTeam.teamId}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/> </div> </div> <div class="form-group"> <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>分配日期:</label> <div class="col-sm-4"> <form:input path="updateTime" value="${blPlanTeam.startTime}" readonly="true" htmlEscape="false" class="form-control" style="width:200px;"/> </div> </div> <div class="form-group"> <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>调整数量:</label> <div class="col-sm-4"> <form:input path="adjustmentNumbers" htmlEscape="false" placeholder="请输入调整数量" class="form-control required" style="width:200px;"/> </div> </div> <div class="form-group"> <label class="col-sm-1 control-label" style="font-size:13px;"><font color="red">*</font>调整原因:</label> <div class="col-sm-4"> <form:textarea path="adjustmentDesc" rows="6" cols="40" /> </div> </div> <!-- <div class="panel-footer" align="right"> <button type="submit" class="btn btn-primary">调整计划</button> </div> --> </fieldset> </form:form> </div> <div class="modal-footer"> <button type="submit" id ="fromSubmit" class="btn btn-primary">调整</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div>这些是要加载到模态框中的页面信息，后台代码我就不多叙述了，效果如下 但是就如文章开头说的一样，加载时会比较慢，体验不是特别好。
我在项目中采用的另一种弹框，是layer插件
top.layer.open({ type: 2, area: ['1000px', '500px'], title:"调整计划", name:'friend', content: "${ctx}/plan/blPlanAdjustment/adjustmentPlanForm?id="+row.id, /* btn: ['调整', '关闭'], yes: function(index, layero){ }, cancel: function(index){ } */ });这样实现的效果跟之前的模态框有点差距但是不大，完全可以替换，功能也是可以实现，而且，在加载时，比模态框要快，体验更好。 可能页面效果没有那个好看，但是加载的要快，所以也就暂时做了两个版本的弹框，以供选择。
本文为本人根据项目需求研究写出，也许有所不足，真诚的希望，有大牛能帮我纠正一下，我的错误，互相提高，以便以为可以分享更好的代码和技术给大家，携手在研发的道路上一去不复返。
