仿MSN弹出消息框

< script language = " JavaScript " >   
<!--   
  
/*   
**    ==================================================================================================  
**    类名：CLASS_MSN_MESSAGE  
**    功能：提供类似MSN消息框  
**    示例：  
    ---------------------------------------------------------------------------------------------------  
  
            var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈");  
                MSG.show();  
  
    ---------------------------------------------------------------------------------------------------  
**    作者：ttyp  
**    邮件：ttyp@21cn.com  
**    日期：2005-2-1  
**    ==================================================================================================  
* */   
  
  
/*   
 *    消息构造  
  */   
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 =   3000 ;  
     this .speed   =   20 ; 
     this .step    =   1 ; 
 
     this .left    =   0 ; 
     this .right   =  screen.availWidth  - 1 ;  
     this .top     =   0 ; 
     this .bottom  =  screen.availHeight; 
     this .autoHideTimeOut  =   0 ;
}  
  
/*   
 *    隐藏消息方法  
  */   
CLASS_MSN_MESSAGE.prototype.hide  =   function ()  
{  
     if ( this .onunload())      
    {  
         this .Pop.hide();  
         if ( this .timer)  
        {  
            window.clearInterval( this .timer);  
        }  
    }  
}  
  
/*   
 *    消息卸载事件，可以重写  
  */   
CLASS_MSN_MESSAGE.prototype.onunload  =   function ()  
{  
     return   true ;  
}  
/*   
 *    消息命令事件，要实现自己的连接，请重写它  
 *  
  */   
CLASS_MSN_MESSAGE.prototype.oncommand  =   function ()  
{  
    alert( this .message);  
     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=#cfdef4 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;  
  
     var  docWidth     =   this .right;  
     var  docHeight    =   this .bottom - h;  
     var  offset       =  screen.height  -  screen.availHeight;  
 
     var  me           =   this ;  
     var  timer;  
 
     var  fun  =   function ()  
    {  
        oPopup.show(docWidth - w, docHeight  +  offset, w, h);    
         if (offset  <=   0 )  
        {  
            window.clearInterval(timer);  
             if (me.autoHideTimeOut > 0 )
            {
                window.setTimeout( function (){me.hide()},me.autoHideTimeOut);
            }
        }  
        offset  =  offset  -  me.step;  
  
    }  

     if ( typeof ( this .speed) != " number " || this .speed <= 0 )
    {
         this .speed  =   20 ;
    }

    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();  
    }  
  
     this .timer  =  timer;  
  
}  
  
CLASS_MSN_MESSAGE.prototype.rect  =   function (left,right,top,bottom) 
{ 
     try  
    { 
         this .left    =  left     ? left    : 0 ; 
         this .right   =  right     ? right    :screen.availWidth  - 1 ; 
         this .top     =  top     ? top    : 0 ; 
         this .bottom  =  bottom ? bottom    :screen.availHeight; 
    } 
     catch (e) 
    {} 
} 
 
var  msg1  =   new  CLASS_MSN_MESSAGE( " aa " , 200 , 120 , " 短消息提示： " , " 您有1封消息 " , " 今天请我吃饭哈 " );  
    msg1.speed  =  2 0 ;
    msg1.autoHideTimeOut  =   2000 ;
    msg1.show();  
 
// 同时两个有闪烁，只能用层代替了，不过层不跨框架 
// var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有2封消息","好的啊");  
//       MSG2.rect(0,null,0,screen.availHeight-120); 
//     MSG2.show();  
 
// -->  
</ script >

转载于:https://www.cnblogs.com/nianshi/archive/2009/03/24/1420384.html