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

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

[javascript]
$(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 + ')');   www.zzzyk.com
          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);
            }
          }

        }
    });&

补充：web前端 , JavaScript ,