其實看著像是一個對話框,可卻不是使用alert,或者windows.open之類的方法制作的,其實就是在頁面中添加瞭一個類似p之類的容器,然後讀取後臺消息,動態生成有p組成的彈出款,在使用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("<p id ='"+alertContainerID+"' style='zIndex:1;height:10px;bottom:0px;right:0px'; ></p>");
}
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("<p id ='"+alertDivID+"'></p>");
$("#" +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.aiwalls.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);
}
}
}
});
}
作者:xuexiaodong2009