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

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

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

  

    

      

        ${pageCode.msg }
      
      

        确定
        
      
    
  

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

            

    

        

            
序号
            
归属项目经理
            
OA文编号
            
任务编号
            
需求标题
            
需求状态
            
是否涉及周边系统
            
备注
        
    
    

        

                
${status.index + (PAGE.currentPage-1)*10 + 1}
                
${each.REALNAME}
                
${each.OANO }
                
${each.TASKNO }
                
${each.REQUIREHEAD }
                
${each.REQUIRESTATUS }
                
${each.AROUNDSYSTEMFLAG }
                
${each.REQUIREMEMO }
            
        
    


// 鼠标悬浮在一个td上，显示该条详情
function finddetail(requireid, trrequireId) {
    console.log("当前requireid：" + requireid);
    console.log("当前trrequireId：" + trrequireId);
    
    // 获取标准表头 对象数组
    var standradTitleArray = new Array();  
      
        var eachObj = new Object();
        eachObj.value = '${each.value}';
        eachObj.memo = '${each.memo}';
        standradTitleArray.push(eachObj); //js中可以使用此标签，将EL表达式中的值push到数组中  
    
    
    // 获取每条数据详情
    $.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"+ title + " " + data[prop] + "";
                    }
                }
                $("#"+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;
}