`
eagletony
  • 浏览: 40724 次
  • 来自: ...
社区版块
存档分类
最新评论

div 实现遮罩显示输入文字对话框

StrutsWeb 
阅读更多 
<%--
****************************************************************************
* DESC       ：查询查询结果
* AUTHOR     ：创建人
* CREATEDATE ：创建日期
* MODIFYLIST ：   Name       Date            Reason/Contents
****************************************************************************
--%>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/app.tld" prefix="a"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>

	<a:head />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<style>
* {
	margin: 0;
	padding: 0;
	font-size: 12px;
}

html,body {
	height: 100%;
	width: 100%;
}

#content {
	background: #f8f8f8;
	padding: 30px;
	height: 100%;
}

#content a {
	font-size: 30px;
	color: #369;
	font-weight: 700;
}

#alert {
	border: 1px solid #369;
	width: 300px;
	height: 150px;
	background: #e2ecf5;
	z-index: 1000;
	position: absolute;
	display: none;
}

#alert h4 {
	height: 20px;
	background: #369;
	color: #fff;
	padding: 5px 0 0 5px;
}

#alert h4 span {
	float: left;
}

#alert h4 span#close {
	margin-left: 210px;
	font-weight: 500;
	cursor: pointer;
}

#alert p {
	padding: 12px 0 0 30px;
}

#alert p input {
	width: 200px;
	margin-left: 20px;
	height: 40px;
}

#alert p input.myinp {
	border: 1px solid #ccc;
	height: 20px;
}

#alert p input.sub {
	width: 60px;
	margin-left: 30px;
	height: 20px;
}

#calert {
	border: 1px solid #369;
	width: 300px;
	height: 150px;
	background: #e2ecf5;
	z-index: 1000;
	position: absolute;
	display: none;
}

#calert h4 {
	height: 20px;
	background: #369;
	color: #fff;
	padding: 5px 0 0 5px;
}

#calert h4 span {
	float: left;
}

#calert h4 span#cclose {
	margin-left: 210px;
	font-weight: 500;
	cursor: pointer;
}

#calert p {
	padding: 12px 0 0 30px;
}

#calert p input {
	width: 200px;
	margin-left: 20px;
	height: 40px;
}

#calert p input.myinp {
	border: 1px solid #ccc;
	height: 20px;
}

#calert p input.sub {
	width: 60px;
	margin-left: 30px;
	height: 20px;
}
</style>
	<head>

		<script>

 function bitchConfirm(){
	//var cont=document.getElementById("textcon"); 
			//alert(cont.value);
	//$('fm').action='alarmInfo-bitchConfirm.action?alarmInfoPage.alarmLog='+cont.value;
	$('fm').action='alarmInfo-bitchConfirm.action';
	$('fm').submit();
 }
	
	
 function bitchDelete(){
	$('fm').action='alarmInfo-bitchTransform.action';
	$('fm').submit();
 }

 function quickQuery(){
 	$('fm').action='alarmInfo-quickQuery.action';
	$('fm').submit();
 }

</script>

	</head>
	<body onload="general.addNbsp();" scroll="no">
		<script type="text/javascript" src="../examples.js"></script>
		<!-- EXAMPLES -->
		<form action="alarmInfoQuery.action" name="fm" method="post">
			<div id="mbc" />
				<table class="queryResult">
					<tr>
						<td align='right'>
							<a:select id="alarmInfoPage.alarmInfo.deviceType"
								name="alarmInfoPage.alarmInfo.deviceType"
								hql="FROM ResourceType where resourceTypeLevel='dir' and resourceTypeId not in ('document','contract','busisys')"
								key="resourceTypeId" value="resourceTypeName"
								onchange="quickQuery()" firstName="全部" selectedValue="alarmInfoPage.alarmInfo.deviceType" />

						</td>
					</tr>
					<tr>
						<td height="27" style="margin: 0; padding: 0;">
							<a:operateButton modelName="alarmInfo" query="false" copy="false"
								delete="false" insert="false">
								<!-- input value="确认" id="mbc" type="button" class="mainButton" onclick="confirm()"  name="mainButton" /-->
								<input value="确认" type="button" id="bt" class="mainButton"
									onclick="" />
								<input value="清除" type="button" id="cbt" class="mainButton"
									onclick="" name="mainButton" />
								<td align="">
									告警级别
									<!-- s:select name="alarmInfoPage.alarmInfo.alertLevel"
										list="#{'':'全部','1':'Critical', '2':'Major','3':'Minor','4':'Warn','5':'Unknown','6':'Clear'}"
										onchange="quickQuery()" /-->
										<a:selectBase name="alarmInfoPage.alarmInfo.alertLevel"
										 type="itemAlarmLevel"
										 firstName="全部" 
										 selectedValue="alarmInfoPage.alarmInfo.alertLevel"
										  onchange="quickQuery()"/>
										
									发生时间
									<s:select name="alarmInfoPage.filterTime"
										list="#{'':'全部','1':'最近1小时','2':'~~~ 6小时','3':'~~~ 12小时','4':'最近3天','5':'最近一周','6':'最近一个月'}"
										onchange="quickQuery()" />
								</td>

							</a:operateButton>
						</td>
					</tr>
					<tr>
						<td height="100%" valign="top">
							<div class="fixedHeaderDiv" id="fixedHeaderDiv">
								<table class="fixed">
									<tr class="fixedHeaderTr">

										<td class="centerListTitle" width="5%">
											<input type="checkBox" onclick="general.selectAll()" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.alertName"></s:text>
											<a:orderImg fieldName="alertName" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.resourceId"></s:text>
											<a:orderImg fieldName="resourceId" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.IP"></s:text>
											<a:orderImg fieldName="IP" />
										</td>
										
										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.deviceType"></s:text>
											<a:orderImg fieldName="deviceType" />
										</td>

										

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.alertLevel"></s:text>
											<a:orderImg fieldName="alertLevel" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.alertType"></s:text>
											<a:orderImg fieldName="alertType" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.state"></s:text>
											<a:orderImg fieldName="state" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.ackOperator"></s:text>
											<a:orderImg fieldName="ackOperator" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.alertTime"></s:text>
											<a:orderImg fieldName="alertTime" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.occurTimes"></s:text>
											<a:orderImg fieldName="occurTimes" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.recentTime"></s:text>
											<a:orderImg fieldName="recentTime" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.alertMessage"></s:text>
											<a:orderImg fieldName="alertMessage" />
										</td>
										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.ackRecord"></s:text>
											<a:orderImg fieldName="ackRecord" />
										</td>

										<td class="centerListTitle">
											<!-- 标题栏 -->
											<s:text name="alarmInfoPage.alarmInfo.ackTime"></s:text>
											<a:orderImg fieldName="ackTime" />
										</td>

									</tr>


									<s:iterator value="commonPage.pageRecord.result" id="alarmInfo">

										<tr class="contentTr"
											onmouseover="javascript:general.overColor();"
											onmouseout="javascript:general.outColor();">
											<td class="centerContentTd" width="5%">
												<input type="checkBox" name="commonPage.idBox"
													value="${alarmInfo.infoId}" onclick="general.setAllBox()" />
											</td>

											<td class="centerContentTd">
												${alarmInfo.alertName}
											</td>
												
											<td class="centerContentTd">
											${alarmInfo.resourceData.resourcename} 
											</td>
											<td class="centerContentTd">
												${alarmInfo.IP}
											</td>
											<td class="centerContentTd">
											${alarmInfo.resourceType.resourceTypeName}  
											</td>

											

											<td class="centerContentTd">
												<s:if test="#alarmInfo.alertLevel==1">
													<div style="background-color: red">
														<a:text key="alarmInfo.alertLevel" type="itemAlarmLevel"/>
													</div>
												</s:if>
												<s:elseif test="#alarmInfo.alertLevel==2">
													<div style="background-color: orange">
														<a:text key="alarmInfo.alertLevel" type="itemAlarmLevel"/>
													</div>
												</s:elseif>
												<s:elseif test="#alarmInfo.alertLevel==3">
													<div style="background-color: yellow">
														<a:text key="alarmInfo.alertLevel" type="itemAlarmLevel"/>
													</div>
												</s:elseif>
												<s:elseif test="#alarmInfo.alertLevel==4">
													<div style="background-color: 00FFFF">
														<a:text key="alarmInfo.alertLevel" type="itemAlarmLevel"/>
													</div>
												</s:elseif>
												<s:elseif test="#alarmInfo.alertLevel==5">
													<div style="background-color: E7EBE7">
														<a:text key="alarmInfo.alertLevel" type="itemAlarmLevel"/>
													</div>
												</s:elseif>
												<s:elseif test="#alarmInfo.alertLevel==6">
													<div style="">
														<a:text key="alarmInfo.alertLevel" type="itemAlarmLevel"/>
													</div>
												</s:elseif>

											</td>

											<td class="centerContentTd">
											<a:text key="alarmInfo.alertType" type="itemAlarmType"/>
											</td>

											<td class="centerContentTd">
												<s:if test="#alarmInfo.state==1">
													<div style="">
														<img src="confirmed.gif" />
														&nbsp;已确认
													</div>
												</s:if>
												<s:elseif test="#alarmInfo.state==0">
													<div style="">
														<img src="unconfirmed.gif" />
														&nbsp;未确认
													</div>
												</s:elseif>
											</td>

											<td class="centerContentTd">
												<s:if test="#alarmInfo.ackOperator==null">
													<div style="">
														UnAssigned
													</div>
												</s:if>
												<s:else>
												${alarmInfo.ackOperator}
												</s:else>
											</td>

											<td class="centerContentTd">
												<a:showDate name="alarmInfo.alertTime"/>
											</td>

											<td class="centerContentTd">
												${alarmInfo.occurTimes}
											</td>

											<td class="centerContentTd">
												<a:showDate name="alarmInfo.recentTime"/>
											</td>
											
											<td class="centerContentTd">
												${alarmInfo.alertMessage}
											</td>
											<td class="centerContentTd">
												${alarmInfo.ackRecord}
											</td>

											<td class="centerContentTd">
												<a:showDate name="alarmInfo.ackTime"/>
											</td>

										</tr>

									</s:iterator>

								</table>
							</div>
						</td>
					</tr>
				</table>
				<div id="alert">
					<h4>
						<span>日志信息</span><span id="close">关闭</span>
					</h4>
					<p>
						<label>
							请输入日志:
						</label>
						<s:textarea label="Comments" id="alarmInfoPage.alarmLog"
							name="alarmInfoPage.alarmLog" cols="30" rows="3" />
					</p>
					<p>
						<input type="button" value="确认" onclick="bitchConfirm()"
							class="sub" />
						<input type="button" id="cancle" value="取消" class="sub" />
					</p>
				</div>
				<div id="calert">
					<h4>
						<span>日志信息</span><span id="cclose">关闭</span>
					</h4>
					<p>
						<label>
							请输入日志:
						</label>
						<s:textarea label="Comments" id="alarmInfoPage.alarmClearLog"
							name="alarmInfoPage.alarmClearLog" cols="30" rows="3" />
					</p>
					<p>
						<input type="button" value="确认" onclick="bitchDelete()"
							class="sub" />
						<input type="button" id="ccancle" value="取消" class="sub" />
					</p>
				</div>
		</form>


		<script type="text/javascript"> 
	var myAlert = document.getElementById("alert"); 
	var cAlert = document.getElementById("calert"); 
	var reg = document.getElementById("bt");
	var creg = document.getElementById("cbt");
	var myCancle= document.getElementById("cancle"); 
	var cmyCancle= document.getElementById("ccancle"); 
	var mClose = document.getElementById("close"); 
	var cmClose = document.getElementById("cclose"); 
	reg.onclick = function() 
	{ 
	myAlert.style.display = "block"; 
	myAlert.style.position = "absolute"; 
	myAlert.style.top = "50%"; 
	myAlert.style.left = "50%"; 
	myAlert.style.marginTop = "-75px"; 
	myAlert.style.marginLeft = "-150px";

	mybg = document.createElement("div"); 
	mybg.setAttribute("id","mybg"); 
	mybg.style.background = "#000"; 
	mybg.style.width = "100%"; 
	mybg.style.height = "100%"; 
	mybg.style.position = "absolute"; 
	mybg.style.top = "0"; 
	mybg.style.left = "0"; 
	mybg.style.zIndex = "500"; 
	mybg.style.opacity = "0.3"; 
	mybg.style.filter = "Alpha(opacity=30)"; 
	document.body.appendChild(mybg);

	document.body.style.overflow = "hidden"; 
	}
	
	creg.onclick = function() 
	{ 
	cAlert.style.display = "block"; 
	cAlert.style.position = "absolute"; 
	cAlert.style.top = "50%"; 
	cAlert.style.left = "50%"; 
	cAlert.style.marginTop = "-75px"; 
	cAlert.style.marginLeft = "-150px";

	mybg = document.createElement("div"); 
	mybg.setAttribute("id","mybg"); 
	mybg.style.background = "#000"; 
	mybg.style.width = "100%"; 
	mybg.style.height = "100%"; 
	mybg.style.position = "absolute"; 
	mybg.style.top = "0"; 
	mybg.style.left = "0"; 
	mybg.style.zIndex = "500"; 
	mybg.style.opacity = "0.3"; 
	mybg.style.filter = "Alpha(opacity=30)"; 
	document.body.appendChild(mybg);

	document.body.style.overflow = "hidden"; 
	}

	myCancle.onclick = function() 
	{ 
	myAlert.style.display = "none"; 
	mybg.style.display = "none"; 
	} 
	
	mClose.onclick = function() 
	{ 
	myAlert.style.display = "none"; 
	mybg.style.display = "none"; 
	} 
	
	cmyCancle.onclick = function() 
	{ 
	cAlert.style.display = "none"; 
	mybg.style.display = "none"; 
	} 
	
	cmClose.onclick = function() 
	{ 
	cAlert.style.display = "none"; 
	mybg.style.display = "none"; 
	} 
</script>
	</body>
</html>
<a:foot />
<script>
window.onload(general.showQuery('alarmInfoPrepareQuery.action'));
</script>
分享到：
| Jfreechart+ajax 实现动态仪表图 jsp
评论
发表评论

文章已被作者锁定，不允许评论。

相关推荐

    DIV遮罩层如何实现

    今天有任务让加个蒙版，JS小白的我在网上找了个修改下，改成了JS模版以后可以重复用啦,本文将详细介绍DIV遮罩层如何实现，需要的 朋友可以参考下

    jQuery实现遮罩层登录对话框

    用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。本文将推荐一个带二维码的登录弹出层，可拖动、关闭，有需要的朋友可以参考一下。

    Div 弹出 DIV移动 遮罩层 Div对话框 Div窗口

    Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框，JS源代码

    js弹出div并显示遮罩层

    代码如下: //——————–弹出层——————- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { ...

    js实现遮罩层划出效果是生成div而不是显示

    同遮盖层划入一样，单纯的遮盖层划出的话算的上是非常简单了，但是在这里它却就不这么简单了，而且我前面还选了个比较麻烦的生成div，而不是显示存在的div，这里有那么几点需要特别注意： 1、遮盖层出现后，鼠标哪怕...

    jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

    单击删除按钮或者登陆按钮后，弹出对话框问你是否删除或者弹出一个登陆对话框，本文使用jquery来实现这种效果，需要的朋友可以参考下

    jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

    主要介绍了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法,涉及jQuery响应鼠标事件动态改变页面元素样式的功能,需要的朋友可以参考下

Magicbox
Global site tag (gtag.js) - Google Analytics