纯JS实现MSN消息框-优快云博客

本文介绍了一种使用纯JavaScript实现的类似MSN消息框的功能，该功能支持自定义宽度、高度等属性，并可在屏幕任意位置弹出。适用于IE5.5及以上版本浏览器。

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

纯js编写
跨框架
无图片
支持调速度
任意位置弹出
需要ie5.5以上

<SCRIPTlanguage=JavaScript>

<!--

/**//*

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

**类名：CLASS_MSN_MESSAGE

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

**示例：

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

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

MSG.show();

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

**作者：ttyp

**邮件：ttyp@21cn.com

**日期：2005-3-18

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

**/

/**//*

*消息构造

functionCLASS_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;

this.close=false;

this.autoHide=true;

}

/**//*

*隐藏消息方法

CLASS_MSN_MESSAGE.prototype.hide=function()

{

if(this.onunload())

{

varoffset=this.height>this.bottom-this.top?this.height:this.bottom-this.top;

varme=this;

if(this.timer>0)

{

window.clearInterval(me.timer);

}

varfun=function()

{

if(me.pause==false||me.close)

{

varx=me.left;

vary=0;

varwidth=me.width;

varheight=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()

{

returntrue;

}

/**//*

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

CLASS_MSN_MESSAGE.prototype.oncommand=function()

{

this.close=true;

this.hide();

}

/**//*

*消息显示方法

CLASS_MSN_MESSAGE.prototype.show=function()

{

varoPopup=window.createPopup();//IE5.5+

this.Pop=oPopup;

varw=this.width;

varh=this.height;

varstr="<DIVstyle='BORDER-RIGHT:#4556901pxsolid;BORDER-TOP:#a6b4cf1pxsolid;Z-INDEX:99999;LEFT:0px;BORDER-LEFT:#a6b4cf1pxsolid;WIDTH:"+w+"px;BORDER-BOTTOM:#4556901pxsolid;POSITION:absolute;TOP:0px;HEIGHT:"+h+"px;BACKGROUND-COLOR:#c9d3f3'>"

str+="<TABLEstyle='BORDER-TOP:#ffffff1pxsolid;BORDER-LEFT:#ffffff1pxsolid'cellSpacing=0cellPadding=0width='100%'bgColor=#cfdef4border=0>"

str+="<TR>"

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

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

str+="<TDstyle='PADDING-RIGHT:2px;PADDING-TOP:2px'vAlign=centeralign=rightwidth=19>"

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

str+="</TR>"

str+="<TR>"

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

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

str+="<DIVstyle='WORD-BREAK:break-all'align=left><Ahref='javascript:void(0)'hidefocus=trueid='btCommand'><FONTcolor=#ff0000>"+this.message+"</FONT></A></DIV>"

str+="</DIV>"

str+="</TD>"

str+="</TR>"

str+="</TABLE>"

str+="</DIV>"

oPopup.document.body.innerHTML=str;

this.offset=0;

varme=this;

oPopup.document.body.onmouseover=function()

{me.pause=true;}

oPopup.document.body.onmouseout=function()

{me.pause=false;}