最近做一个效果:
一个页面有n条记录,点击一个小图标,运行后台程序查出数据,将数据显示为图,并在弹出的小窗口显示。弹出小窗口的时候要锁定父窗口,关闭解锁父窗口。
开始想使用模式窗口showModalDialog,但是这个对于ie支持,ff、google不支持(弹出来不会锁定父窗口)
判断浏览器,加入使用widow.open也不能解决。
最后只能是使用div的遮盖层了。具体说下:
1.jsp页面:
<a href="javascript:void(0)" onclick="configwin('<s:property value="type.id" />');"><img src="../img/statistics.gif" border="0" style="margin-left:10px"/></a>
点击图片会调用函数configwin,使用struts2的标签传值进去。为了避免跳转:href="javascript:void(0)"
使用ajax的框架prototype.js来发送请求获得相应的数据库数据。
为什么不使用直接的action的url呢?===action的最后都是转向一个页面,如果直接使用就会跳转到页面去。这点很重要
所以:
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript">
function configwin(id) {
var tmp = Math.random().toString();
var url = "proto_chart.action?tmp="+tmp+"&typeId="+id;
new Ajax.Request(url, {
method:'post',
asynchronous:true ,
onSuccess:function(req){
sAlert("chart/chart"+id+".jpg");
}
});
}
红字部分是:当浏览器向同一个url发请求,浏览器就会记忆下来,当接到相同请求的时候就不发请求了,直接用以往数据来返回,所以,添加了随机数,保证每次url都不同,Math是js内部对象,不是java的,直接使用即可,不需要引用。
蓝色部分是:封装了遮盖层的div的js。
内部流程说下:
请求给action,action从数据库提取值出来调用Jfreechart,并保存为jpg图片,命名为chartid。jpg
action返回是Action.none(空)
在封装了的js中将url作为img的src赋值,并弹出div来。
js如下(注:此代码是网上搜罗来加工了一小下的,感谢作者的无私贡献)
function sAlert(str){
var msgw,msgh,bordercolor;
msgw=300;
msgh=300;
titleheight=25;
bordercolor="#c51100";
titlecolor="#c51100";
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.innerHTML="close";
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
};
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
var img=document.createElement("img");
img.style.margin="1em 0";
img.style.width = msgw-50 + "px";
img.style.height =msgh -50+ "px";
img.setAttribute("id","imgTxt");
img.src=str;
document.getElementById("msgDiv").appendChild(img);
}
分享到:
相关推荐
BitLocker 硬盘锁定解密方法 BitLocker 是 Windows 操作系统中的一种磁盘加密工具,可以保护计算机中的数据免受未经授权的访问。...同时,如果遇到无法弹出 BitLocker 解密窗口的问题,可以使用命令提示符来解锁硬盘。
oracle 用户被锁定解锁方法
vb 文件夹锁定解锁 vb 文件夹锁定解锁示例源码
易语言锁定解锁应用程序源码,锁定解锁应用程序,锁定到任务栏,Each,GetIndex,取对象枚举接口,枚举,重置,跳到,重新获取,Next,Skip,Reset,MultiByteToWideChar,动态调用子程序_API
解锁WINRAR锁定的压缩文件
用于锁定/解锁任务栏图标。 适用于win7\win10,其它系统未测试,使用方法:脚本+程序完整路径。 如果任务栏没有,则锁定到任务栏,如果任务栏已存在则解锁。 示例: 任务栏图标.VBS C:\Program Files\internet ...
C#锁定和解锁窗体
锁定文件目录或解锁文件目录 (锁定和解锁的批处理工具)
VB 键盘锁定、解锁 让别人不能乱动我的电脑
安装后打开软件,选择要查询的OU,然后选查询,查询完后可以按字段排列,比如按被锁定的排列,选择要解锁的,后点enable select就可以完成解锁 如果因病毒原因造成大面积域帐号锁定,可使用本工具来一次解所有的帐号...
锁定IE浏览器后,IE默认首页、搜索页及右键菜单等均不可被修改,建议你在确保系统干净,并做好自己的设置后再锁定IE设置项目。注意:本工具不负责修复IE各项设置,请首先确保上述设置正常。[1]锁定IE的所有设置,...
在启用帐户锁定策略后,因病毒或未更新关键补丁等原因造成域帐号大量锁定时可以使用此工具批量进行解锁,单击“系统-域用户查看及管理信息”,先查看锁定的帐户,再批量进行解锁即可。
锁定与解锁 课程目标 了解 —— 锁定和解锁的概念; 掌握 —— 锁定和解锁的设置; 锁定与解锁 MySQL提供了LOCK TABLES语句来锁定当前线程的表,语法格式如下: LOCK TABLES tbl_name [AS alias] {READ [LOCAL] | ...
在需要锁定IP的机子上运行锁定IP 程序。 在需要解锁的机子上运行解锁IP程序即可。 对内网安全比较管用。
SCOTT用户的解锁与锁定过程 BY 茬子 QQ:909283
很方便的注册表锁定于解锁工具。当你的注册表经常被别人修改或攻击时这个工具是你的最佳任选。
TFS TFS解锁 PT解锁工具 1、下载pt工具 2、安装,关掉VS即可,没难度。 3、以管理员身份打开VS2010 4、在源代码管理器上,选中一个路径后,右键,会多出一个菜单:Find in Source Control-选择Status 5、点击...
文件夹锁定解锁示例VB源码,本程序采用VB编写,界面友好,程序简单,实用性强~
简单的锁定文件和解锁文件的批处理工具,锁定后会提示没有访问权限