html:
打开第一个窗口与按钮：
<button type="button" class="btn btn-primary btn btn-primary" onClick="downloadBudget()" style="float: left;margin-bottom: 14px;width: 152px;height: 40px;margin-top: 28px;background-color: #0085da;color: white;">生成项目资金预算</button>
在该jsp中添加两个弹出窗口的html：
<div class="modal fade" id="modalDiv" >
<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">
<div class="input-group" id="selectYearIn">
<span class="input-group-addon" id="basic-addon3">预算年份：</span>
<select class="col-value" id="selectYear" style="height: 40px;width: 150px;padding-left: 10px;">
<c:forEach items="${yearList}" var="item" varStatus="ststus">
<option value="${item.stsId }" >${item.stsWords }</option>
</c:forEach>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="retunModal">取消</button>
<button class="btn btn-primary" data-toggle='modal' id="toTableDiv">确定</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="tableModalDiv" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="width: 1000px;">
<div class="modal-content">
<div class="modal-header" style="border-bottom:none;">
<button type="button" style="float:right;width:100px;" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" style="float:right;margin-right:20px;width:100px;background: #00aeee;width: 100px;border: 1px solid #fff;" class="btn btn-primary" id="downLoadTable" onClick="downLoadTable()">下载</button>
</div>
<div class="modal-body">
<div class="input-group" id="selectYearIn" style="width:100%">
<table class="table table-striped">
<thead>
<tr>
<th>资金名称</th>
<th>项目名称</th>
<th>预算金额</th>
<th>细化项目</th>
<th>处室</th>
<th>备注</th>
</tr>
</thead>
<tbody id="tBody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
js:
//生成项目资金预算---财务人员角色（角色待添加）
function downloadBudget(){
$('#modalDiv').modal('show');
}
//选择年份生成预算表格
$("#toTableDiv").click(function(){
var options=$("#selectYear option:selected");
var year = options.val();//所选年份
$("#selectYear").val(year);
$.ajax({//拼表格
url:"${ctx}/specialFound/selectTable",
data: {"year":year},
type:"post",
async: false,
// dataType:"json",
success:function(data){
var listStr = eval('('+data+')');
console.log(listStr)
$('#retunModal').click();
$('#tableModalDiv').modal('show');
var html = [];
$.each(listStr.list, function(id,val){
html.push('<tr>');
html.push(' <td>'+val.capitalNameText+'</td>');
html.push(' <td>'+val.projectNameText+'</td>');
html.push(' <td>'+val.budgetAmount+'</td>');
html.push(' <td>'+val.projectRefinement+'</td>');
html.push(' <td>'+val.businessOfficeText+'</td>');
html.push(' <td>'+val.remarks+'</td>');
html.push('</tr>');
});
$("#tBody").html(html.join(''));
}
});
});
最终效果：
1、点击按钮，弹出第一个窗口
image.png
2、选择年份后，点击窗口1中的确定按钮，关闭窗口1，弹出窗口2：
image.png
之前查了一些资料，大多是两个窗口叠加，这样导致关闭窗口2时窗口1还存在，因此在打开窗口2的时候，添加了窗口1关闭按钮的点击事件，则会关闭窗口1。
