js定时读取消息，并弹出动画效果的提示信息

      在网上经常看到一些很漂亮的效果，例如主动读取后台的消息，然后弹出一个很漂亮的弹出框，提示用户。

     其实看着像是一个对话框，可却不是使用alert，或者windows.open之类的方法制作的，其实就是在页面中添加了一个类似div之类的容器，然后读取后台消息，动态生成有div组成的弹出款，在使用jquery的动画效果，就很漂亮了。简单的代码实现如下：

$(document).ready(function()
{
AddAlertContainer();
setInterval("GetAlertInfo('ajaxPage/GetAjaxData.aspx')",3000);
});

var id=1;
var alertContainerID = "AlertContainer"; //弹出框容器id
var distance=5;
function AddAlertContainer()
{
$("body").append("<div id ='"+alertContainerID+"' style='zIndex:1;height:10px;bottom:0px;right:0px'; ></div>");
}

function AddAlertDiv(content){
var alertContainer=$("#"+alertContainerID)[0];
//新弹出层
var newDivWidth = 400;//新弹出层宽度
var newDivHeight = 200;//新弹出层高度
var newDivtop=(document.body.scrollTop + document.body.clientHeight/2
- newDivHeight/2) ;//新弹出层距离上边距离
var newDivleft=(document.body.scrollLeft + document.body.clientWidth/2
- newDivWidth/2);//新弹出层距离左边距离

var alertDivID="alertDivID"+id;
id=id+1;
$("#"+alertContainerID).append("<div id ='"+alertDivID+"'></div>");

$("#" +alertDivID).css("position", "absolute");//
$("#" +alertDivID).css("zIndex", id);//
$("#" +alertDivID).css("width", newDivWidth+ "px");//
$("#" +alertDivID).css("height", newDivHeight+ "px");//

$("#" +alertDivID).css("top", newDivtop*2+ "px");//
$("#" +alertDivID).css("left", newDivleft*2+ "px");//

$("#" +alertDivID).css("background","#EFEFEF");//
$("#" +alertDivID).css("border", "1px solid #860001");//
$("#" +alertDivID).css("padding", "5px");//
distance=distance+5;
$("#" +alertDivID).append(content);

$("#" +alertDivID).animate({
top:newDivtop+distance, left: newDivleft+distance
}, { duration: 1000 });

$("#"+alertDivID).append("<span id ='"+"alertCloseID"+id+"' style='position:absolute;left:350px;'>Close</span>");
var newA =$("#"+"alertCloseID"+id);
newA.click( function ()
{

$("#" +alertDivID).fadeOut(1000,function(){
$("#" +alertDivID).remove();
distance=distance-5;
});
return false;
});

$("#"+alertDivID).append("<span id ='"+"alertSureID"+id+"' style='position:absolute;left:180px;top:150px;font-size:23px;'>确定</span>");
var newA =$("#"+"alertSureID"+id);
newA.click( function ()
{
$("#" +alertDivID).fadeOut(1000,function(){
$("#" +alertDivID).remove();
distance=distance-5;
});
return false;
});

}
var lastReadTime=undefined;
function GetAlertInfo(url)
{

if(lastReadTime==undefined)
{
var time=new Date();
lastReadTime=time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate()+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();//+"."+time.getMilliseconds();
}

$.ajax({
type: "GET",
url: url,
data: "oper=GetAlertInfo"+"&time=" + lastReadTime,
success: function(result)
{
var resultObj = eval('(' + result + ')');
if (resultObj.totalProperty > 0&&resultObj.root.length > 0)
{
for(var i=0;i<resultObj.root.length;i++)
{
var content=resultObj.root[i].Content;
AddAlertDiv(content);
}
}

}
});
}