在网上经常看到一些很漂亮的效果&＃xff0c;例如主动读取后台的消息&＃xff0c;然后弹出一个很漂亮的弹出框&＃xff0c;提示用户。
其实看着像是一个对话框&＃xff0c;可却不是使用alert&＃xff0c;或者windows.open之类的方法制作的&＃xff0c;其实就是在页面中添加了一个类似div之类的容器&＃xff0c;然后读取后台消息&＃xff0c;动态生成有div组成的弹出款&＃xff0c;在使用jquery的动画效果&＃xff0c;就很漂亮了。简单的代码实现如下&＃xff1a;
$(document).ready(function()
{AddAlertContainer();setInterval("GetAlertInfo(&＃39;ajaxPage/GetAjaxData.aspx&＃39;)",3000);
});var id&＃61;1;
var alertContainerID &＃61; "AlertContainer"; //弹出框容器id
var distance&＃61;5;
function AddAlertContainer()
{ $("body").append("");
}function AddAlertDiv(content){var alertContainer&＃61;$("#"&＃43;alertContainerID)[0];//新弹出层var newDivWidth &＃61; 400;//新弹出层宽度var newDivHeight &＃61; 200;//新弹出层高度var newDivtop&＃61;(document.body.scrollTop &＃43; document.body.clientHeight/2 - newDivHeight/2) ;//新弹出层距离上边距离var newDivleft&＃61;(document.body.scrollLeft &＃43; document.body.clientWidth/2 - newDivWidth/2);//新弹出层距离左边距离var alertDivID&＃61;"alertDivID"&＃43;id;id&＃61;id&＃43;1;$("#"&＃43;alertContainerID).append(""); $("#" &＃43;alertDivID).css("position", "absolute");// $("#" &＃43;alertDivID).css("zIndex", id);// $("#" &＃43;alertDivID).css("width", newDivWidth&＃43; "px");// $("#" &＃43;alertDivID).css("height", newDivHeight&＃43; "px");// $("#" &＃43;alertDivID).css("top", newDivtop*2&＃43; "px");// $("#" &＃43;alertDivID).css("left", newDivleft*2&＃43; "px");//$("#" &＃43;alertDivID).css("background","#EFEFEF");// $("#" &＃43;alertDivID).css("border", "1px solid #860001");//$("#" &＃43;alertDivID).css("padding", "5px");//distance&＃61;distance&＃43;5;$("#" &＃43;alertDivID).append(content); $("#" &＃43;alertDivID).animate({top:newDivtop&＃43;distance, left: newDivleft&＃43;distance}, { duration: 1000 }); $("#"&＃43;alertDivID).append("Close"); var newA &＃61;$("#"&＃43;"alertCloseID"&＃43;id); newA.click( function () { $("#" &＃43;alertDivID).fadeOut(1000,function(){$("#" &＃43;alertDivID).remove(); distance&＃61;distance-5;}); return false; });$("#"&＃43;alertDivID).append("确定"); var newA &＃61;$("#"&＃43;"alertSureID"&＃43;id); newA.click( function () { $("#" &＃43;alertDivID).fadeOut(1000,function(){$("#" &＃43;alertDivID).remove(); distance&＃61;distance-5;}); return false; });}
var lastReadTime&＃61;undefined;
function GetAlertInfo(url)
{if(lastReadTime&＃61;&＃61;undefined)
{var time&＃61;new Date();lastReadTime&＃61;time.getFullYear()&＃43;"-"&＃43;(time.getMonth()&＃43;1)&＃43;"-"&＃43;time.getDate()&＃43;" "&＃43;time.getHours()&＃43;":"&＃43;time.getMinutes()&＃43;":"&＃43;time.getSeconds();//&＃43;"."&＃43;time.getMilliseconds();
}$.ajax({type: "GET",url: url,data: "oper&＃61;GetAlertInfo"&＃43;"&time&＃61;" &＃43; lastReadTime,success: function(result){ var resultObj &＃61; eval(&＃39;(&＃39; &＃43; result &＃43; &＃39;)&＃39;);if (resultObj.totalProperty > 0&&resultObj.root.length > 0){for(var i&＃61;0;i}
京公网安备 11010802041100号