5、bootstrap模态框，弹出框（一）

项目中用到了模态框和弹出框。
模态框：在操作错误或需要提示时弹出，遮罩整个页面，一般显示在整个页面的正中间
弹出框：可以在任意地方显示，如：悬浮在按钮的上下左右，提示少量信息

模态框
如果pageCode.msg 不为空，就显示模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="top: 53%;width: 19%;margin-left: 0%;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        ${pageCode.msg }
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="reupload();">确定</button>
        <!-- <button type="button" class="btn btn-default" data-dismiss="modal" onclick="notEditMapping();">不修改</button> -->
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    $(function() {
        // 如果pagecode有值，弹出提示框
        var editMapping = $('#pageCode').val();
        if(editMapping != '') {
            $('#myModal').modal('show');
        }       
    })
</script>

弹出框
鼠标点击某个td，显示该条记录的全部信息

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" 
    style="table-layout:fixed;">
    <thead>
        <tr>
            <th style="width: 26px;">序号</th>
            <th style="width: 51px;">归属项目经理</th>
            <th style="width: 90px;">OA文编号</th>
            <th style="width: 55px;">任务编号</th>
            <th style="width: 330px;">需求标题</th>
            <th style="width: 52px;">需求状态</th>
            <th style="width: 58px;">是否涉及周边系统</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach items="${FIND_REQUIRE_LIST_BY_SHEETID_PAGE }" var="each" varStatus="status">
            <tr class="odd gradeX">
                <td class="center">${status.index + (PAGE.currentPage-1)*10 + 1}</td>
                <td class="center">${each.REALNAME}</td>
                <td class="center">${each.OANO }</td>
                <td class="center">${each.TASKNO }</td>
                <td class="center" data-html="true" style="WORD-WRAP: break-word"
                 id="trrequire${status.index }" 
                onclick="finddetail('${each.REQUIREID}', 'trrequire${status.index }');" 
                onmouseout="hide('trrequire${status.index }');"
                data-container="body" data-toggle="popover" data-placement="right" 
                data-content="">${each.REQUIREHEAD }</td>
                <td class="center">${each.REQUIRESTATUS }</td>
                <td class="center">${each.AROUNDSYSTEMFLAG }</td>
                <td class="center">${each.REQUIREMEMO }</td>
            </tr>
        </c:forEach>
    </tbody>
</table>

// 鼠标悬浮在一个td上，显示该条详情
function finddetail(requireid, trrequireId) {
    console.log("当前requireid：" + requireid);
    console.log("当前trrequireId：" + trrequireId);
    
    // 获取标准表头 对象数组
    var standradTitleArray = new Array();  
    <c:forEach items="${TITLE_STANDARD}" var="each">  
        var eachObj = new Object();
        eachObj.value = '${each.value}';
        eachObj.memo = '${each.memo}';
        standradTitleArray.push(eachObj); //js中可以使用此标签，将EL表达式中的值push到数组中  
    </c:forEach>
    
    // 获取每条数据详情
    $.ajax({
        url: '<%=basePath %>data/findRequireByRequireId/' + requireid,
        method: 'get',
        contentType: 'application/json', // 这句不加出现415错误:Unsupported Media Type
        data: {}, // 以json字符串方式传递
        success: function(data) {
            console.log(data);
            if(data != null) {
                console.log("弹出框");
                var content = "";
                for(var prop in data) {
                    // 排除不需要展示的 属性和属性值
                    if(data[prop] != null && prop != 'requireid' && prop != 'sheetid' && prop != 'serialno') {
                        var title = '';
                        // 把英文标题转换成中文标题
                        for(var i=0; i<standradTitleArray.length; i++) {
                            if(standradTitleArray[i].value == prop) {
                                title = standradTitleArray[i].memo;
                            }
                        }
                        // 拼接提示框里的内容
                        content = content + "<tr><td style='text-align: left'>"+ title + "</td><td> " + data[prop] + "</td></tr>";
                    }
                }
                $("#"+trrequireId.toString()).attr('data-content', content);
                // 鼠标悬浮，显示提示框
                $("#"+trrequireId.toString()).popover('show');
                $(".popover-content").attr('style', 'background-color: #ddd;');
            } 
        },
        error: function(data) {
            console.log("error...");
        }
    });
}
        

spring boot中的controller

// 根据requireid 查询单条记录
@ResponseBody
@RequestMapping(value = "/findRequireByRequireId/{requireId}")
public Require findRequireByRequireId(@PathVariable String requireId) {
    Require require = dataService.findRequireByRequireId(requireId);
    return require;
}