消息弹出窗口的做法？

xwk789xwk 2008-12-15 10:00:17
各位好，向大家请教个问题，就好像csdn论坛上的功能一样，如果别人发信息给你的时候，当你登录论坛的时，在屏幕的右下方自动弹出一个小窗口，允许用户点击查看消息？请问该功能应该怎样实现呢？知道的帮忙告诉一声，先在此谢谢大家了。
...全文
426 33 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
33 条回复
切换为时间正序
请发表友善的回复…
发表回复
钱币老顽童 2011-03-12
  • 打赏
  • 举报
 回复
楼上的是哥们你们太强了，我都快羡慕死你们的技术了。
mrhu7002 2008-12-18
  • 打赏
  • 举报
 回复
3楼 顶！！！
yagebu1983 2008-12-17
  • 打赏
  • 举报
 回复
需要用JS和css来实现！！！
好像有这种控件的！！
搜搜！！
zhu660 2008-12-17
  • 打赏
  • 举报
 回复
3楼和4楼都是老大哥了，什么时候才能达到你们所具有的能力啊！！！ ~~~~（>_<)~~~~
MAOGE1987 2008-12-17
  • 打赏
  • 举报
 回复
直接MARK
泡面之夏 2008-12-17
  • 打赏
  • 举报
 回复 
/*  

**    ==================================================================================================  

**    类名：CLASS_MSN_MESSAGE  

**    功能：提供类似MSN消息框  

**    示例：  

    ---------------------------------------------------------------------------------------------------  

  

            var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈");  

                MSG.show();  

  

    ---------------------------------------------------------------------------------------------------  

**    作者：ttyp  

**    邮件：ttyp@21cn.com  

**    日期：2005-3-18  

**    ==================================================================================================  

**/  

  

  

/*  

 *    消息构造  

 */  

function CLASS_MSN_MESSAGE(id,width,height,caption,title,message,target,action)  

{  

    this.id     = id;  

    this.title  = title;  

    this.caption= caption;  

    this.message= message;  

    this.target = target;  

    this.action = action;  

    this.width    = width?width:200;  

    this.height = height?height:120;  

    this.timeout= 150;  

    this.speed    = 20; 

    this.step    = 1; 

    this.right    = screen.width -1;  

    this.bottom = screen.height; 

    this.left    = this.right - this.width; 

    this.top    = this.bottom - this.height; 

    this.timer    = 0; 

    this.pause    = false;

}  

  

/*  

 *    隐藏消息方法  

 */  

CLASS_MSN_MESSAGE.prototype.hide = function()  

{  

    if(this.onunload())      

    {  

        var offset  = this.height>this.bottom-this.top?this.height:this.bottom-this.top; 

        var me  = this;  

 

        if(this.timer>0)  

        {   

            window.clearInterval(me.timer);  

        }  

 

        var fun = function()  

        {  

            if(me.pause==false)

            {

                var x  = me.left; 

                var y  = 0; 

                var width = me.width; 

                var height = 0; 

                if(me.offset>0) 

                { 

                    height = me.offset; 

                } 

     

                y  = me.bottom - height; 

     

                if(y>=me.bottom) 

                { 

                    window.clearInterval(me.timer);  

                    me.Pop.hide();  

                } 

                else 

                { 

                    me.offset = me.offset - me.step;  

                } 

                me.Pop.show(x,y,width,height);    

            }

             

        }  

 

        this.timer = window.setInterval(fun,this.speed)      

    }  

}  

  

/*  

 *    消息卸载事件，可以重写  

 */  

CLASS_MSN_MESSAGE.prototype.onunload = function()  

{

    return true;  

}  

/*  

 *    消息命令事件，要实现自己的连接，请重写它  

 *  

 */  

CLASS_MSN_MESSAGE.prototype.oncommand = function()  

{  

    //alert("OK");

    this.hide();  

}  

  

/*  

 *    消息显示方法  

 */  

CLASS_MSN_MESSAGE.prototype.show = function()  

{  

    var oPopup = window.createPopup(); //IE5.5+  

  

    this.Pop = oPopup;  

  

    var w = this.width;  

    var h = this.height;  

  

    var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR: #c9d3f3'>"  

        str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#CEDBF3 border=0>"  

        str += "<TR>"  

        str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"  

        str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"  

        str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"  

        str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"  

        str += "</TR>"  

        str += "<TR>"  

        str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"  

        str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>" + this.title + "<BR><BR>"  

        str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#ff0000>" + this.message + "</FONT></A></DIV>"  

        str += "</DIV>"  

        str += "</TD>"  

        str += "</TR>"  

        str += "</TABLE>"  

        str += "</DIV>"  

  

    oPopup.document.body.innerHTML = str; 

    

  

    this.offset  = 0; 

    var me  = this;  



    oPopup.document.body.onmouseover = function(){me.pause=true;}

    oPopup.document.body.onmouseout = function(){me.pause=false;}



    var fun = function()  

    {  

        var x  = me.left; 

        var y  = 0; 

        var width    = me.width; 

        var height    = me.height; 

 

 

            if(me.offset>me.height) 

            { 

                height = me.height; 

            } 

            else 

            { 

                height = me.offset; 

            } 

 

        y  = me.bottom - me.offset; 

        if(y<=me.top) 

        { 

            me.timeout--; 

            if(me.timeout==0) 

            { 

                window.clearInterval(me.timer);  

                me.hide(); 

            } 

        } 

        else 

        { 

            me.offset = me.offset + me.step; 

        } 

        me.Pop.show(x,y,width,height);    

 

          

 

    }  

  

    this.timer = window.setInterval(fun,this.speed)      

  

     

  

    var btClose = oPopup.document.getElementById("btSysClose");  

  

    btClose.onclick = function()  

    {  

        me.hide();  

    }  

  

    var btCommand = oPopup.document.getElementById("btCommand");  

    btCommand.onclick = function()  

    {  

        me.oncommand();  

    }  

  

  

}  

/* 

** 设置速度方法 

**/ 

CLASS_MSN_MESSAGE.prototype.speed = function(s) 

{ 

    var t = 20; 

    try 

    { 

        t = praseInt(s); 

    } 

    catch(e){} 

    this.speed = t; 

} 

/* 

** 设置步长方法 

**/ 

CLASS_MSN_MESSAGE.prototype.step = function(s) 

{ 

    var t = 1; 

    try 

    { 

        t = praseInt(s); 

    } 

    catch(e){} 

    this.step = t; 

} 

  

CLASS_MSN_MESSAGE.prototype.rect = function(left,right,top,bottom) 

{ 

    try 

    { 

        this.left        = left    !=null?left:this.right-this.width; 

        this.right        = right    !=null?right:this.left +this.width; 

        this.bottom        = bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height; 

        this.top        = top    !=null?top:this.bottom - this.height; 

 

    } 

    catch(e) 

    {} 

}


JavaScript实现的消息弹出框,下载地址,完整资源包!
泡面之夏 2008-12-17
  • 打赏
  • 举报
 回复
上面帖出来的只是发送消息的一个页面而已,整个资源包是类似MSN,其中包含消息弹出框.
xwk789xwk 2008-12-16
  • 打赏
  • 举报
 回复
就好像csdn论坛一样，当有人发信息给你的时候，在右下角弹出一个小窗口提示有人发信息给你
xwk789xwk 2008-12-16
  • 打赏
  • 举报
 回复
上面那个例子是在线聊天吧
xwk789xwk 2008-12-16
  • 打赏
  • 举报
 回复
定时访问数据库的数据，根据数据是否更新来判断什么时候右下方弹出窗口呢
xwk789xwk 2008-12-16
  • 打赏
  • 举报
 回复
研究一下
wangzhenyue 2008-12-15
  • 打赏
  • 举报
 回复
学习
claymore1114 2008-12-15
  • 打赏
  • 举报
 回复
使用 popUpWin 控件 很简单的
flyingfz 2008-12-15
  • 打赏
  • 举报
 回复
mark
gzMysky 2008-12-15
  • 打赏
  • 举报
 回复
支持3楼
泡面之夏 2008-12-15
  • 打赏
  • 举报
 回复 
<%@ Page language="c#" Codebehind="SendMsg.aspx.cs" AutoEventWireup="false" Inherits="ch111.SendMsg" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

	<HEAD>

		<title>聊天</title>

		<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">

		<meta name="CODE_LANGUAGE" Content="C#">

		<meta name="vs_defaultClientScript" content="JavaScript">

		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

		<link type="text/css" href="css/global.css">

		<script src="javascript/common.js" type="text/javascript"></script>

	</HEAD>

	<body onunload="dialogArguments.sendWindow=false;" onload="dialogArguments.sendWindow=true;"

		bgcolor="#f5f8fc">

		<form id="Form1" method="post" runat="server">

			<asp:Label id="Label1" runat="server">请输入您要发送的消息</asp:Label>

			<TABLE id="Table1" cellSpacing="0" cellPadding="0" width="100%" border="0">

				<tr height="1">

					<td>

						<hr>

					</td>

				</tr>

				<TR>

					<TD height="200" valign="top" style="OVERFLOW: scroll;HEIGHT: 300px">

						<div id="recentMsg"><FONT face="宋体"></FONT></div>

					</TD>

				</TR>

				<TR height="1">

					<TD><hr>

					</TD>

				</TR>

				<TR>

					<TD>

						<input type="text" id="content" style="WIDTH: 90%" onkeydown="if (event.keyCode==13) {sendMessage();return false;}">

						<INPUT type="button" value="发送" onclick="javascript:sendMessage()" style="BORDER-TOP-STYLE: groove; BORDER-RIGHT-STYLE: groove; BORDER-LEFT-STYLE: groove; BACKGROUND-COLOR: #ebf1fa; BORDER-BOTTOM-STYLE: groove">

					</TD>

				</TR>

				<tr>

					<td><div id="statusBar"></div>

					</td>

				</tr>

			</TABLE>

			<script language="jscript">

			

			// 获取最近的消息

			function getRecentMsg()

			{

				// 消息显示<div>对象

				var div_recentMsg = el("recentMsg");

				

				// 根据url获取用户名

				var username = document.location.search.split('=')[1];

				

				// 获取最新消息的数据表

				var dt = ch111.SendMsg.GetRecentMsg(username).value.Tables[0];

				

				// 从后向前将消息内容显示

				for (var i = dt.Rows.length - 1;i >= 0;i--)

				{

					// 一条消息对应与一个<span>对象

					var oneMsg = document.createElement("span");

					

					// 消息发送者与发送对象

					var strLine1 = dt.Rows[i].sender + "说: (" + dt.Rows[i].sendtime + ")";

					strLine1 = DealBrackets(strLine1);

					

					// 消息内容

					var strLine2 = dt.Rows[i].content;

					strLine2 = DealBrackets(strLine2);

					

					// 显示样式

					oneMsg.innerHTML = "<pre>" + strLine1 + "<br>  " + strLine2 + "</pre>";

					oneMsg.style.padding = "2px 2px 2px 2px";

					oneMsg.style.color = (dt.Rows[i].sender == username) ? "blue" : "red";

					oneMsg.style.fontFamily = "'Courier New' , 宋体";



					// 附加到DOM

					div_recentMsg.appendChild(oneMsg);

				}

			}

			

			// 发送消息

			function sendMessage()

			{

				// 消息内容输入框

				var ta_content = el("content");

				

				// 如果输入内容不为空

				if (ta_content.value.length > 0)

				{

					// 消息显示区域

					var div_recentMsg = el("recentMsg");

					

					// 用户名

					var username = document.location.search.split('=')[1];

					

					// 发送消息

					ch111.SendMsg.SendMessage(username, ta_content.value);

					

					// 清空输入框

					ta_content.value = "";

					

					// 页面跟随输入框滚动

					ta_content.scrollIntoView(false);

					

					// 获取新消息

					getNewMessage();

				}

			}

			

			// 获取最新的消息

			function getNewMessage()

			{

				// 用户名

				var username = document.location.search.split('=')[1];

				

				// 消息显示区域

				var div_recentMsg = el("recentMsg");

				

				// 获取最新消息的数据表

				var dt = ch111.SendMsg.GetNewMessage().value.Tables[0];

				for (var i = 0;i < dt.Rows.length;i++)

				{

					// 一条消息对应与一个<span>对象

					var oneMsg = document.createElement("span");

					

					// 消息发送者与发送对象

					var strLine1 = dt.Rows[i].sender + "说: (" + dt.Rows[i].sendtime + ")";

					strLine1 = DealBrackets(strLine1);

					

					// 消息内容

					var strLine2 = dt.Rows[i].content;

					strLine2 = DealBrackets(strLine2);

					

					// 显示样式

					oneMsg.innerHTML = "<pre>" + strLine1 + "<br>  " + strLine2 + "</pre>";

					oneMsg.style.padding = "2px 2px 2px 2px";

					oneMsg.style.color = (dt.Rows[i].sender == username) ? "blue" : "red";

					oneMsg.style.fontFamily = "'Courier New' , 宋体";



					// 附加到DOM

					div_recentMsg.appendChild(oneMsg);

				}

			}

			

			// 主进程循环

			function mainLoop()

			{

				// 获取新消息

				getNewMessage();

				

				// 每隔1秒检查一次

				setTimeout("mainLoop()", 1000);

			}

			

			// 显示最近的消息

			getRecentMsg();

			

			// 定时更新消息列表

			mainLoop();

			</script>

		</form>

	</body>

</HTML>



using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Data.SqlClient;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Configuration;

using AjaxPro;



namespace ch111

{

	/// <summary>

	/// SendMsg 的摘要说明。

	/// </summary>

	public class SendMsg : System.Web.UI.Page

	{

		protected System.Web.UI.WebControls.Label Label1;

	

		private void Page_Load(object sender, System.EventArgs e)

		{

			// 在此处放置用户代码以初始化页面

			Utility.RegisterTypeForAjax(typeof(SendMsg));

		}



		#region Web 窗体设计器生成的代码

		override protected void OnInit(EventArgs e)

		{

			//

			// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。

			//

			InitializeComponent();

			base.OnInit(e);

		}

		

		/// <summary>

		/// 设计器支持所需的方法 - 不要使用代码编辑器修改

		/// 此方法的内容。

		/// </summary>

		private void InitializeComponent()

		{    

			this.Load += new System.EventHandler(this.Page_Load);



		}

		#endregion



		/// <summary>

		/// 获取最近的消息

		/// </summary>

		/// <param name="strUsername">用户名</param>

		/// <returns>最近消息的数据集</returns>

		[AjaxMethod()]

		public DataSet GetRecentMsg(string strUsername)

		{

			// 返回的数据集

			DataSet ds = new DataSet();



			// 数据连接

			SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);



			// SQL命令

			SqlCommand cmd = conn.CreateCommand();			

			cmd.CommandText = string.Format(

				"GetRecentMsg '{0}','{1}', {2}",

				User.Identity.Name, strUsername, 8);



			// 数据适配器

			SqlDataAdapter da = new SqlDataAdapter(cmd);



			try

			{

				// 填充消息信息

				da.Fill(ds);

			}

			catch (SqlException)

			{

			}

			finally

			{

				// 关闭连接

				conn.Close();

			}



			return ds;

		}



		/// <summary>

		/// 发送消息

		/// </summary>

		/// <param name="strUsername">用户名</param>

		/// <param name="strContent">内容</param>

		[AjaxMethod()]

		public void SendMessage(string strUsername, string strContent)

		{

			// 数据连接

			SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);



			// SQL命令

			SqlCommand cmd = conn.CreateCommand();			

			cmd.CommandText = string.Format("SendMessage '{0}','{1}', '{2}'",

				User.Identity.Name, strUsername, strContent);



			try

			{

				// 打开数据连接

				conn.Open();



				// 执行SQL,发送消息

				cmd.ExecuteNonQuery();

			}

			catch (SqlException)

			{

			}

			finally

			{

				// 关闭连接

				conn.Close();

			}

		}



		/// <summary>

		/// 获取新消息

		/// </summary>

		/// <returns>新消息数据集</returns>

		[AjaxMethod()]

		public DataSet GetNewMessage()

		{

			// 返回的数据集

			DataSet ds = new DataSet();



			// 数据连接

			SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);



			// SQL命令

			SqlCommand cmd = conn.CreateCommand();			

			cmd.CommandText = string.Format("GetNewMessage '{0}'", User.Identity.Name);



			// 数据适配器

			SqlDataAdapter da = new SqlDataAdapter(cmd);



			try

			{

				// 向DataSet中填充消息数据

				da.Fill(ds);

			}

			catch (SqlException)

			{

			}

			finally

			{

				// 关闭连接

				conn.Close();

			}



			return ds;

		}

	}

}


以上仅为发送信息的页面及代码,源码和数据库可到这里下载
journeydj 2008-12-15
  • 打赏
  • 举报
 回复
定时刷新查询
xwk789xwk 2008-12-15
  • 打赏
  • 举报
 回复
谢谢各位的帮忙，我仔细看一下
weilu0328 2008-12-15
  • 打赏
  • 举报
 回复
检查当前USERS是否已经处于登录状态，而且这个时候该USERS的消息库中是否存在新消息，有的话，在该USERS刚登录的时候就弹出小窗口予以提示。大概的理解意思咯，供LZ参考了.
wojiushiliumang 2008-12-15
  • 打赏
  • 举报
 回复
发信息的时候 将信息写入数据库
利用一个定时函数定时察看数据库(每n秒/分)
有消息则弹出消息框
无消息则不做事
用ajax实现吧
加载更多回复（13）
全面解析：弹出窗插件与jQuery弹窗实现
简介：弹出窗口是网页开发中的一种交互设计，用于显示消息、警告等。弹出窗插件简化了创建弹窗的过程，提供丰富的功能和自定义选项。本文深入探讨了弹出窗插件的原理、使用方法及在jQuery环境中的应用，包括...
使用C#实现仿MSN弹出窗口的设计与实践
简介：本文介绍了如何利用C#语言开发一个类似MSN的弹出窗口。实现方式分为两种：一种是通过调用AnimateWindow函数实现丰富的窗口动画效果，另一种则是使用Timer控件和多线程技术来实现简单的弹出效果。通过代码示例...
利用JavaScript实现动态加载与弹出窗口的高效交互
弹出窗口是在Web开发中常见的一个交互元素，它能够在用户浏览网页时，通过各种触发机制（例如点击按钮或特定事件发生时），在现有的浏览器窗口之上打开一个新的浏览器窗口或窗体，用于显示信息、提交表单、交互操作...
主流桌面浏览器Chrome，FireFox和Edge等如何禁用弹出式窗口阻止程序，这里有详细步骤
主流桌面浏览器Chrome，FireFox和Edge等如何禁用弹出式窗口阻止程序，这里有详细步骤。
WP7开发中使用自定义的弹出窗口
今天与大家分享一下WP7开发中如何使用自定义的弹出窗口，为MessageBox寻找一种替代方案。 两种方法： 1. 使用Coding4Fun提供的MessagePrompt（本人比较推荐这种方法）； 2. 自定义UserControl，自己设计窗口布局...
.NET社区

62,243

社区成员

668,998

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章