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

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

阅读更多
<%--
****************************************************************************
* 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>


分享到:
评论
发表评论

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

相关推荐

    js 遮罩层弹出对话框 很简单得

    js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得

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

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

    模式对话框(可刷新)+可移动div+遮罩层

    在IT界,模式对话框(Modal Dialog)是一种常见的用户界面元素,它用于向用户显示重要信息或要求用户提供输入,同时阻止他们与对话框背后的应用程序交互。这种对话框强制用户处理当前的问题,直到他们完成对话框的...

    JS弹DIVJS弹DIV,遮罩层JS弹DIV,遮罩层

    JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层

    AlertDialog对话框 实现遮罩层

    要实现带有遮罩层的`AlertDialog`,我们首先需要自定义一个布局文件,这个布局包含对话框本身和遮罩层。在`res/layout`目录下创建一个XML文件,例如`dialog_mask.xml`: ```xml android:id="@+id/overlay" ...

    jQuery实现单击按钮遮罩弹出对话框效果(1)

    6. **绑定其他事件**:为取消按钮、确定按钮和关闭图片绑定事件,以便实现对话框的关闭功能。在点击这些按钮时,执行`.hide()`方法来隐藏遮罩层和对话框。 #### 实现步骤 1. **页面初始化**:在页面加载完成后,...

    DIV遮罩层 div div

    总之,DIV遮罩层是一种简单而有效的网页设计技巧,它不仅能够帮助开发者实现对页面特定区域的焦点控制,还能提升网站的交互性和用户体验。通过合理的布局和精细的代码编写,遮罩层可以成为网页设计中不可或缺的一...

    JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口/对话框控件 js javascript 对话框

    总的来说,这个资源为开发者提供了一个实用的、可定制的对话框解决方案,通过使用JS和CSS,可以轻松地在网页中实现拖动、自定义和遮罩效果的对话框,提高Web应用的交互性和用户体验。开发者可以根据项目需求进行二次...

    div弹出框、对话框、模态窗口

    这些元素通常用于显示警告、询问用户输入或者提供额外的信息,而不会中断用户对主要页面的浏览。本文将深入探讨这些概念,并提供关于如何实现它们的技术细节。 首先,`div` 是HTML中的一个块级元素,它允许开发者...

    实现div 遮罩 frameset

    在这个场景中,“实现div 遮罩 frameset”意味着在`frameset`布局的网页上,使用`div`来实现一个可移动的遮罩层或弹出窗口。 首先,我们来看`frameset`。`frameset`是HTML4中的元素,它允许我们将浏览器窗口划分为...

    div 模式对话框 js +Div

    在构建模态对话框时,我们通常会创建一个隐藏的 `div` 元素,然后通过 JavaScript 来控制它的显示和隐藏,以实现对话框的效果。 `dd.html` 文件可能是包含对话框HTML结构的示例文件。在 HTML 结构中,模态对话框...

    漂亮遮罩层css+div

    漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div 漂亮遮罩层css+div ...

    jQuery遮罩效果的弹出层对话框.rar

    "jQuery遮罩效果的弹出层对话框.rar"是一个包含多种弹出层实现的资源包,主要目的是提供不同类型的提示和交互反馈,如提示层、确认框、alert对话框以及删除商品的确认提示。这些功能在网页应用中十分常见,可以提高...

    CSS+DIV+JQuery源码实现遮罩效果

    在这个"CSS+DIV+JQuery源码实现遮罩效果"的资源中,我们可以学习如何利用这三种技术来创建一个功能完备且视觉效果良好的遮罩层。 首先,CSS(Cascading Style Sheets)是网页样式表语言,主要用于定义HTML或XML...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    1. **使用 Div 实现**:创建一个全屏覆盖的黑色半透明 Div 作为遮罩层,设置 `z-index` 属性确保遮罩层位于其他元素之上。 2. **使用 Iframe 实现**:如果需要支持跨域内容的加载,可以使用 Iframe 来构建遮罩层。...

    DIV层遮罩-demo

    DIV层遮罩,简单功能实现,代码不规范,随便写的

    如何在Winform程序中实现遮罩层对话框(蒙版窗口)源码示例

    在Windows Forms(Winform)应用程序开发中,有时候我们需要在用户执行特定操作时显示一个遮罩层对话框,也称为蒙版窗口,以防止用户在后台界面进行其他操作,提高用户体验。这个过程涉及到对窗体的透明度控制、事件...

    页面中弹出对话框div

    在网页设计中,"页面中弹出对话框div"是一个常见的需求,用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面,而是覆盖在内容上,提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...

    Bootstrap实现遮罩层

    Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 参考文档: http://blog.csdn.net/u014175572/article/details/51800168 Bootstrap实现遮罩层 ...

    Qt之实现遮罩窗口,实现了窗口遮罩效果

    在Qt编程中,实现遮罩窗口(mask window)是一种常见的需求,主要用于在界面操作时提供视觉提示或防止用户误操作。遮罩窗口通常是一个半透明的覆盖层,它允许底层窗口的部分可见,但限制用户的交互。本文将详细介绍...

Global site tag (gtag.js) - Google Analytics