网站右下角弹出通知效果的制作

很多网站都有通知和消息的弹出窗口，一般都是在右下角部分，而且可以随着页面的滚动始终保持在右下角，且浮动于最上层，也就是说你不会因为点击了当前页面而使得通知窗口隐藏了。重要的一点是，该窗口中的内容是实时从数据库或其他远程部分中取来，不是简单的一个登陆欢迎通知。这当然就是Ajax的强项了。如果这个窗口的CSS做的再漂亮点的话，那效果就更好了。这里，我就说说如何制作这样的弹出窗口。

首先，要明确我们做的不是简单的通知一次即可的弹出窗口。是需要动态去服务器或其他远程部分如webservice取来数据，这就要求最起码得知道页面的加载和工作流程。应该是这样的：

1、请求页面Page；

2、加载Page中的元素；

3、将Page返回客户端；

4、执行Page中的JavaScript方法；

5、在其中一个JavaScript方法中定时调用与服务器交互的方法；

6、后台执行该方法，返回处理结果（数据库中查询到满足条件的信息，如有新的新闻或邮件）；

7、服务器将结果发送给客户端的JavaScript回调方法；

8、处理该结果，需要显示时动态生成DIV或者将已存在的DIV样式的display设为block；

9、关闭通知窗口时销毁该DIV或将其display设为none

从头写Ajax的东西比较麻烦，这里就用Devexpress的控件代替，可以节约很多开发量的。

首先，在当前页面Page放一个ASPxCallback组件，设置各项属性如下:

<dxcb:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="Callback1"
OnCallback="ASPxCallback1_Callback">
<ClientSideEvents CallbackComplete="function(s, e) {
if(!docEle('newDiv'))
	openNewDiv('newDiv',e.result);			
     }" />
</dxcb:ASPxCallback>

其中ASPxCallback1_CallBack是cs文件对应的回调方法；cs文件中就需要有这个名字的方法：

protected void ASPxCallback1_Callback(object source, CallbackEventArgs e)
    {
        string strSQL = "you sql here";
        string strResult = "";
        DataSet DS = Exeute(strSQL);
        if (DS.Tables[0].Rows[0][0].ToString()!="0")
        {
            strResult = "<a href='News.aspx' hidefocus=true id='btCommand'><FONT color=#ff0000>here is what you need information</FONT></a>";
        }
        e.Result = strResult;
    }

返回的就是带有HTML标记的信息内容，之所以在后台处理为带有HTML标记的信息，是为了更好的控制显示消息的格式。

待服务端返回查询结果后，就可以执行上面ASPxCallBack中的funtion(s,e){}方法了。首先检测通知层newDiv是否以弹出（是否存在）,若已弹出则不再弹出新窗口，否则弹出一个通知窗口，位置在右下角。

具体弹出通知窗口的方法使用JavaScript来实现的：

<script type="text/javascript">
    function applicationInitHandler() 
	{
		window.setInterval("ShowDetails()", 5000);
	}
	function ShowDetails() 
	{
      Callback1.SendCallback();
    }
</script>
 
<script language="javascript">
	var docEle = function() 
	{
	    return document.getElementById(arguments[0]) || false;
	}
	function openNewDiv(_id,message) 
	{
	    if (docEle(_id)) document.body.removeChild(docEle(_id));

	    var newDiv = document.createElement("div");
		var str = "<table width='100%' cellSpacing=0 cellPadding=0><tr><td align='right' valign='top'>"
			str+="<SPAN title='your title' style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >close btn</SPAN>"
			str+="</td></tr>"  
			str += "<tr><td>"+message+"</td></tr>" 
			str+="</table>"
	    newDiv.id = _id;
	    newDiv.style.position = "absolute";
	    newDiv.style.zIndex = "9999";
	    newDivWidth = 200;
	    newDivHeight =120;
	    newDiv.style.width = newDivWidth + "px";
	    newDiv.style.height = newDivHeight + "px";
	    newDiv.style.top = (document.body.scrollTop+document.body.clientHeight - newDivHeight) + "px";
	    newDiv.style.left = (document.body.scrollLeft+document.body.clientWidth - newDivWidth) + "px";
	    newDiv.style.background = "#EFEFEF";
	    newDiv.style.border = "1px solid #860001";
	    newDiv.style.padding = "5px";
	    newDiv.innerHTML = str ;
	    document.body.appendChild(newDiv);
		
	    var btClose = document.getElementById("btSysClose");  
	    btClose.onclick = function()
		{  
	        if(document.all)
	        {
	            window.detachEvent("onscroll",newDivPosition);
	        }
	        else
	        {
	            window.removeEventListener('scroll',newDivPosition,false);
	        }
	        document.body.removeChild(docEle(_id));
	    }  
	    function newDivPosition()
	    {
			newDiv.style.top = (document.body.scrollTop+document.body.clientHeight - newDivHeight) + "px";
			newDiv.style.left = (document.body.scrollLeft+document.body.clientWidth - newDivWidth) + "px";
	    }
	    if(document.all)
	    {
	        window.attachEvent("onscroll",newDivPosition);
	    }
	    else
	    {
	        window.addEventListener('scroll',newDivPosition,false);
	    }
	}    
</script>

其中newDivPosition()用来调整通知窗口始终在网页的右下角。document.body.scrollTop表示页面超出浏览器顶端的部分的长度。

同理document.body.scrollLeft表示超出左边的部分。window.attachEvent("onscroll",newDivPosition); 设置一个关联事件，

当浏览器页面滚动时，调整弹出窗口的位置。

这里值得注意的就是window.setInterval("ShowDetails()", 5000); 每隔5秒去服务器端检测有没有新的需要显示的消息。这样才能实现动态

通知和提醒。

最后要说的就是，还有种通过JavaScript方法window.createPopup()来创建一个弹出窗口，这个方式有个很大缺陷就是，新弹出的

通知窗口始终是焦点获得者，致使页面正文无法通过鼠标滚动轴操作和选择文字，除非关掉弹出的窗口，我认为非常不方便。

这里用层来实现，简单也容易修改样式，就写到这，祝大家好运！