js定时读取消息，并弹出动画效果的提示信息代码,JS代码库,德仔网

代码语言

代码分类

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

作者:xuexiaodong009 / 发布于2014/1/21/ 343

其实看着像是一个对话框，可却不是使用alert，或者windows.open之类的方法制作的，其实就是在页面中添加了一个类似div之类的容器，然后读取后台消息，动态生成有div组成的弹出

$(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);
      }     
     }     
     
    }
  });
}

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　弹出动画　

同语言下

可能有用的

xuexiaodong009贡献的其它代码(1)

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