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

最新推荐文章于 2024-02-28 17:52:54 发布

jetable

最新推荐文章于 2024-02-28 17:52:54 发布

阅读量3.1k

点赞数

分类专栏： asp.net 文章标签： javascript function callback webservice scroll 服务器

本文链接：https://blog.csdn.net/jetable/article/details/4158438

版权

asp.net 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种利用Ajax技术实现实时更新的通知弹窗的方法。通过定时向服务器请求数据并根据返回结果动态生成或更新弹窗内容，同时保持其始终位于页面右下角并浮动于顶层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多网站都有通知和消息的弹出窗口，一般都是在右下角部分，而且可以随着页面的滚动始终保持在右下角，且浮动于最上层，也就是说你不会因为点击了当前页面而使得通知窗口隐藏了。重要的一点是，该窗口中的内容是实时从数据库或其他远程部分中取来，不是简单的一个登陆欢迎通知。这当然就是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 = "here is what you need information


";
        }
        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()来创建一个弹出窗口，这个方式有个很大缺陷就是，新弹出的

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

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