jQuery实现遮蔽层的弹出层，根据后台循环取出的数据弹出所要的DIV层

<style type="text/css">
    .bgDiv{
        background-color:#e3e3e3;
        position:absolute;
        z-index:1;
        left:0;
        top:0;
        display:none;
        width:100%;
        height:100%;
        opacity:0.85;
        filter: alpha(opacity=50);
        -moz-opacity: 0.5;}
    .dialog{
        display: none;
        background:#54b4eb;
        color:#fff;
        position:absolute;
        border-radius:5px;
        height:179.38px;
        width:400px;
        z-index:999;
    }
    .dialog > div{
       padding:15px 40px 30px;
       position:absolute;
       margin: 0;
       font-weight : 300;
       font-size : 1.15em;
       z-index:999;
    }
    .dialog > div ul li {
       padding : 5px 0;
       color : #fff;
       font-family : '黑体';
       font-size : 18px;
       list-style:none;
    }
    .dialog > div ul li strong{
       font-size : 20px;
       font-family : '黑体';
       color : #e74c3c;
    }
    .dialog button {
       display : block;
       margin : 0 auto;
       font-size : 0.8em;
    }
    .btn {
       border : none;
       padding : 0.6em 1.2em;
       background : #c0392b;
       color : #fff;
       font-family : '黑体';
       font-size : 5em;
       letter-spacing : 1px;
       text-transform : uppercase;
       cursor : pointer;
       display : inline-block;
       margin : 3px 2px;
       border-radius : 5px;
    }
    .btn:hover {
       background : #fff;
    }
    </style>
    <script type="text/javascript">
    $(function(){
          var prompts = document.getElementsByName("prompt");
          var heights=$(document.body).height()/30;
          var widths = $(document.body).width()/4;
          //循环弹出div层
          for(var i=0;i<prompts.length;i++){
               if(i%2==0&&i!=0){
                   heights+=250;
                   widths=240;
               }else{
                   if(i==0){
                       widths =240;
                   }else{
                       widths =780;
                   }
               }
                  
                  
              ShowDIV(prompts[i].id,heights,widths);
          }
          function getScrollHeight(){
              return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
          }
          var bgHeights = getScrollHeight();
          $("#bgDiv").css({ display: "block", height: bgHeights});
        });
      
          //所要弹出div层方法
        function ShowDIV(thisObjID,heightDiv,widthDiv) {
             $("#" + thisObjID ).css("top", heightDiv);
             $("#" + thisObjID ).css("left", widthDiv);
             $("#" + thisObjID ).css("display", "block");
             document.documentElement.scrollTop = 0;
       }
        
        //点击确认键发送请求后调用关闭closeDiv(div_id)方法
        function alarmConfirm(id,mId){
            var div_id="div"+mId;
            $.ajax({type : "post",
                    url : ctx+ "/npbi/monitorConfig/alarmConfirm?id=" + id,
                    contentType : "application/json; charset=utf-8",
                    dataType : "text",
                    success : function(result) {
                        if ("false" == result) {
                             alert("失败");
                        } else {
                             alert("成功");
                        }
                        closeDiv(div_id);
                    },
                    error : function() {
                        alert("预警事件确认异常，请稍后再试");
                    }
                })
        }
        
        //关闭弹出的DIV
        function closeDiv(div_id) {
               $("#" + div_id).css("display", "none");
               var isCloseBg = isCloseMyBg($("#" + div_id));
               if(isCloseBg)
                  $("#bgDiv").css("display", "none");
        }
       //当关闭所有div后关闭遮挡层
        function isCloseMyBg($brotherObj) {
              var flag = true;
              $brotherObj.siblings().each(function(){
                 if($(this).is("div") && $(this).attr("id") != 'bgDiv' && $(this).is(":visible")) {
                    flag = false;
                    return;
                 }
              });
              return flag;     
        }
      
    </script>
</head>
<body>
    <div id="bgDiv" class="bgDiv"></div>
    <c:forEach items="${sumListMap.monitorAlarmList}" var="monitorAlarm" >
    <div id ="div${monitorAlarm.mId}"  name="prompt" class="dialog">
         <div>
            <ul>
                <li><strong>提示信息:</strong>${monitorAlarm.alarmEvent}<li>
                <li><strong>提示时间时间:</strong><fmt:formatDate value="${monitorAlarm.alarmTime}"
                                pattern="yyyy-MM-dd HH:mm:ss" /><li>
            </ul>
            <button id="btnConfirm"  class="btn"  onclick="alarmConfirm('${monitorAlarm.id}','${monitorAlarm.mId}');">确认</button>
        
         </div>
</div>
    </c:forEach>

标签：jQuery,function,display,出层,id,var,DIV,font,div
来源： https://blog.csdn.net/qq_27361727/article/details/72611680