（一）页面test.html代码：

<HTML>
<HEAD>
<title>搜保网</title>
<script src="popup.js" type="text/javascript"></script>
<script language="javascript">
function checkinfo()
{
// 宽：200，高：120， 标题：搜保网后台消息提示：，消息：后台消息增加,快去看吧
var MSG1 = new CLASS_MSN_MESSAGE("aa",200,120,"搜保网后台消息提示：", "您有1封消息","今天请我吃饭哈");
// 显示提示框
MSG1.rect(null,null,null,screen.height-50);
MSG1.speed = 20;
MSG1.step = 5;
MSG1.show();
}
</script>
</HEAD>
<body MS_POSITIONING="FlowLayout" οnlοad="checkinfo();">
<form id="Form1" method="post" runat="server">
</form>
</body>
</HTML>
（二）popup.js的代码：

(注:js代码是参考小山老师的，只有小部分修改)

/*
** ==================================================================================================
** 类名：CLASS_MSN_MESSAGE
** 功能：提供类似MSN消息框
** 示例：
var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有1封消息","今天请我吃饭哈");
MSG.show();
** ==================================================================================================
**/

/*
* 消息构造
*/
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=middle width='100%'>" + this.caption + "</TD>"
str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' valign=middle 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()
{
  window.clearInterval(me.timer);
  oPopup.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)
{}
}

转载于:https://www.cnblogs.com/yansheng9988/archive/2008/08/02/1258768.html

像msn那样的message提示相关推荐

  1. message提示框的三种显示方式

    message提示框的三种显示方式 在store.js中使用封装的message提示组件 /* 提示信息封装组件 */ export function messageTips (message, st ...

  2. MSN样式的消息提示

    纯JavaScript编写 跨框架 无图片 支持调速度 任意位置弹出 需要ie5.5以上 < HTML >< HEAD >   < SCRIPT language = J ...

  3. 全局修改elementui message 右边弹出_ElementUI 只允许 $message 提示一次

    场景:在某个API接口中调用了ElementUI的Message方法,在加了loading的情况下,多次请求会重复调用Message方法.Message时间长会重叠,时间段看不清提示内容,很烦---- ...

  4. Pod状态：Evicted Message提示：The node was low on resource: ephemeral-storage

    原因:磁盘被占用,存储空间不足 Evicted 的 Pod不会被清理,需要手动删除

  5. 让ElementUI Message消息提示每次只弹出一次

    官方效果图 遇到的情况是,一进入页面,为空的数据要message消息提示没有该数据,如果很多数据为空,就会如上图弹一整个页面的弹框,用户体验就不是很好. 我目前的解决方案是: 在main.js文件写入 ...

  6. qq在线咨询代码,MSN在线代码,贸易通在线留言源代码!

    QQ在线咨询代码,MSN在线代码,雅虎通在线代码,贸易通在线代码 ------------------------------------------------------------------- ...

  7. 网页MSN,QQ,Skype,贸易通,雅虎通在线客服代码合集

    1.如何在网页上显示腾讯QQ在线洽谈? QQ在线咨询代码(qq在线交谈代码/qq在线客服代码/qq在线状态代码/qq在线客服代码) (将123456换成你的号码,site后面换成你的网站就可以了) & ...

  8. 用QQ邮箱注册到MSN live 账号

    以前用的 MSN账号为hotmail邮箱,很长很不方便,今天想用自己简短的stefan321@qq.com作为MSN ID注册一个. 但是目前在微软的MSN官方网站message.live.com想注 ...

  9. qq客服在线和msn客服在线代码

    msn代码 <A href="msnim:chat?contact=abc@hotmail.com" target=_blank><IMG alt=MSN src ...

最新文章

  1. Android中Activity和task,活动亲和力，启动模式，活动状态以及生命周期，激活钝化
  2. 关于Spring的事务Transactional，锁同步，并发线程
  3. leetcode 376. 摆动序列（dp）
  4. java nvarchar max_sql server中使用nvarchar(MAX)代替ntext
  5. 杭州自学python爬虫_金华自学python网络爬虫直播
  6. php jwt token刷新方案,解决使用jwt刷新token带来的问题
  7. 没有期刊申请清华博士_ICLR飞升，IJCAI降级：清华的新版AI顶会评级引发学术圈热议...
  8. snackbar_Android Snackbar示例教程
  9. 【信号与系统|吴大正】3：离散系统的时域分析
  10. ocx注册方法，vs安装包自动安装ocx，以及ocx注册失败的解决方法
  11. 一起学JAVA 接口 面向接口开发
  12. 小学计算机无生试讲教案,小学英语无生试讲
  13. GitHub项目徽章的添加和设置
  14. virtual memory exhausted: Cannot allocate memory 解决办法 命令分配交换空间
  15. 网上兼职编程赚钱的那点事
  16. 求（2Y-4）²-4（Y-2）（3Y+7）≥0得解
  17. RK3588平台开发系列讲解（PWM篇）PWM及backlight的使用方法
  18. 伊达时计算机闹钟怎么取消,三星s7edge闹钟怎么设置多个
  19. Wordpress使用CloudFlare的CDN来加速网站（页面规则缓存设置教程
  20. 中式家居之美，精致到骨子里

热门文章

  1. pencv candy边缘检测
  2. Cobra命令行框架及使用
  3. VMware SDS 什么是VSAN？？ VSAN的体系结构 （含VSAN 6.0、6.1版的新内容）
  4. Dubbo学习总结（9）——Apache Dubbo Roadmap 2019
  5. 分库分表学习总结（3）——深入理解分布式事务
  6. Java基础学习总结（132）——Java8 Stream流操作学习总结
  7. elementui表格宽度适应内容_element ui 表格高度自适应
  8. php数据库上线步骤,php连接数据库步骤
  9. python3、pycharm的安装以及python基本语法
  10. html5有本地存储吗,HTML5的本地存储