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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- idea--->先交给git本地仓库--->再push到远程仓库
- 图书系统优化分页与搜索跳转
- 解决ie浏览器回车不刷新验证码问题
- jsp跳转jsp----------和------------jsp跳转servlet跳转jsp
- idea中下载并配置稳定版本的MAVEN,电脑环境配置 + setting.xml文件配置
- Python代码性能分析之cProfile
- 自己写一个简单的MyBatis工具类代码+注释
- 多对一和一对多
- 使用C3P0连接数据库
- QQ授权,接收代码发送的电子邮件
- c:set
- 37道Python经典面试题(附答案),看完面试不愁了
- 错误提示合集--->待增加 Σ( ° △ °|||)︴
- RabbitMQ如何保证消息的可靠投递?
- Python处理json总结