bootstrap：同一界面依次弹出两个窗口实现

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。