根据后台循环的数据动态弹出提示框，并且实现带有遮蔽层

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27361727/article/details/73522082

通过ajax动态获得数据，然后根据所得数据，进行相应的带有遮蔽层的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=85);
        -moz-opacity: 0.85;}
    .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;
    }
    .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;
          var bgHeights = getScrollHeight();
          $("#bgDiv").css({ display: "block", height: bgHeights});
          //循环弹出div层
          for(var i=0;i<prompts.length+1;i++){
               if(i%3==0&&i!=0){
                   heights+=250;
                   widths=140;
               }else{
                   if(i==0){
                       widths =140;
                   }else {
                       widths+=440;
                   }
               }//这里根据实际情况，设置弹出框所在的位置，如：一排两个或者一排三个等等。
              ShowDIV(prompts[i].id,heights,widths);
          }
        });
        function getScrollHeight(){
              return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
          }

          //所要弹出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/monig/alarm?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;     
        }

        function jspRefresh(){
             window.location.reload();
        }
         return false;
       }
    </script>

jsp实现代码：

<div id="bgDiv" class="bgDiv"></div>
    <c:forEach items="${list.mrmList}" var="mrm" >
    <div id ="div${mrm.mId}"  name="prompt" class="dialog">
         <div>
            <ul>
                <li><strong>提示信息:</strong>${mrm.alarmEvent}<li>
                <li><strong>时间:</strong><fmt:formatDate value="${mrm.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>