Js regularly reads messages and displays the animation effect prompt.

It looks like a dialog box, but it does not use alert or windows. the method of open is actually to add a container like div in the page, then read the background message and dynamically generate a pop-up model consisting of div, the animation effect of jquery is beautiful. Simple code implementation is as follows:

[Javascript]
$ (Document). ready (function ()
{
AddAlertContainer ();
SetInterval ("GetAlertInfo ('ajaxpage/GetAjaxData. aspx ')", 3000 );
});
 
Var id = 1;
Var alertContainerID = "AlertContainer"; // container id in the pop-up box
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];
// New pop-up layer
Var newDivWidth = 400; // The width of the new pop-up layer
Var newDivHeight = 200; // The height of the new pop-up layer
Var newDivtop = (document. body. scrollTop + document. body. clientHeight/2
-NewDivHeight/2); // distance between the new pop-up layer and the top layer
Var newDivleft = (document. body. scrollLeft + document. body. clientWidth/2
-NewDivWidth/2); // distance from the left side of the new pop-up layer

Var alertDivID = "alertDivID" + id;
Id = id + 1;
$ ("#" + AlertContainerID). append ("<div id = '" + alertDivID + "'> </div> ");

$ ("#" Externalertdivid).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 ");//
$ ("#" Externalertdivid).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; '> OK </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: "response = GetAlertInfo" + "& time =" + lastReadTime,
Success: function (result)
{
Var resultObj = eval ('+ result +'); www.2cto.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 );
}
}

}
});
}

Author: xuexiaodong2009