类似GMAIL的Ajax信息反馈显示_页面背景



代码如下:











/*
message:要显示的消息
x,y:显示消息框的坐标,默认为左上角
delay:延迟多长时间消失，-1为永不消失，单位为毫秒
*/
function feedBackMessage(message,x,y,delay){
if(!message) return;
//只允许百分数或数值参数
x=/\d{1,2}%|100%|left|right/.test(x)?x:(parseInt(x)||0)+"px";
y=/\d{1,2}%|100%|top|bottom/.test(y)?y:(parseInt(y)||0)+"px";
delay=parseInt(delay)||-1;
var fdDiv=document.getElementById('show_feedBack_message');
if(!fdDiv){
var showMessage=document.createElement("");
document.body.appendChild(showMessage);
fdDiv=document.getElementById('show_feedBack_message');
}

if(feedBackMessage.timer){clearInterval(feedBackMessage.timer)}
fdDiv.innerHTML=message;
fdDiv.style.display="";
var docWidth=document.documentElement.scrollWidth>document.documentElement.clientWidth?document.documentElement.scrollWidth:document.documentElement.clientWidth;
var docHeight=document.documentElement.scrollHeight>document.documentElement.clientHeight?document.documentElement.scrollHeight:document.documentElement.clientHeight;
if(/left|right/.test(x)){
x=(x=="left")?"0px":(docWidth-fdDiv.offsetWidth)+"px";
}
if(/top|bottom/.test(y)){
y=(y=="top")?"0px":(docHeight-fdDiv.offsetHeight)+"px";
}
fdDiv.style.left=x;
fdDiv.style.top=y;
fdDiv.filters.Alpha.Opacity=100;

//渐隐效果
var step=parseInt(delay/100);
var alpha=fdDiv.filters.Alpha.Opacity;
if(delay!=-1){
feedBackMessage.timer=setInterval(function(){
if(fdDiv.filters.Alpha.Opacity>0){
fdDiv.filters.Alpha.Opacity--
}else{
clearInterval(feedBackMessage.timer);
fdDiv.style.display="none"
}
},step);
}
}
//-->

1. (默认设置)显示位置：左上角 消失时间：不消失
   
   onclick="feedBackMessage('消息提示测试1......');return false"
   href="#">feedBackMessage('消息提示测试......')

2. 显示位置：left:200px,top:200px 消失时间：5秒后
   
   onclick="feedBackMessage('消息提示测试1......','200','200',5000);return false"
   href="#">feedBackMessage('消息提示测试1......','200','200',5000)

3. 显示位置：页面右上部 消失时间：3秒后
   
   onclick="feedBackMessage('消息提示测试2......','right','top',3000);return false"
   href="#">feedBackMessage('消息提示测试2......','right','top',3000)

4. 显示位置：left:50%,top:50% 消失时间：2秒后
   
   onclick="feedBackMessage('消息提示测试3......','50%','50%',2000);return false"
   href="#">feedBackMessage('消息提示测试3......','50%','50%',2000)
   
5. 显示位置：left:500px,top:200px 消失时间：不消失
   
   onclick="feedBackMessage('消息提示测试4......','500','200',-1);return false"
   href="#">feedBackMessage('消息提示测试4......','500','200',-1)

style="FONT-SIZE: 14px; MARGIN: 15px auto; WIDTH: 96%; LINE-HEIGHT: 20px; TEXT-ALIGN: left">函数语法：feedBackMessage(Message,X,Y,Delay)


参数介绍：
Message：必填参数。该参数为要显示的消息内容，可以为html内容

X：水平方向的位置，可以是数值如50，250等，也可以是百分比如50%，或者是以下两个参数：left(信息框左侧紧邻页面左侧),right(信息框右侧紧邻页面右侧)。默认为left。

Y：垂直方向的位置，可以是数值，也可以是百分比，或者是以下两个参数：top(信息框顶部紧邻页面顶部),bottom(信息框底部紧邻页面底部)。默认为top。

Delay：显示时间，即多长时间后消失，单位为毫秒，如5000即5秒后消失，设定为-1则永不消失。默认为-1




在线演示 http://demo.jb51.net/js/gmail_info/demo.htm