JS realizes that the prompt box similar to QQ news pops up on the scheduled page_javascript skills

I also encountered a requirement when working on China Unicom's IOM project, which required that a prompt message pop up on the page every half hour (the message pops up in a form similar to QQ News). I found such information online at that time, but I can’t remember the source of the original text

Copy the code The code is as follows: JavaScript提示框

<!--

/** * Class name: CLASS_MSN_MESSAGE * Function: Provide MSN-like message box * Example: * var MSG = new CLASS_MSN_MESSAGE("aa",200,120,"Short message prompt:","You There is 1 message", "Invite me to dinner today"); * MSG.show(); * Message structure */ 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; this.close = false; this.autoHide = true; }

/** * Hide message method */ 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); }

/** * Message unloading event, can be overridden */ CLASS_MSN_MESSAGE.prototype.onunload = function() { return true; } /** * Message command event, to implement your own connection, please rewrite it */ CLASS_MSN_MESSAGE.prototype.oncommand = function(){ this.close = true; this.hide(); window.open("http://www.lost63.com"); } /** * 消息显示方法 */ CLASS_MSN_MESSAGE.prototype.show = function(){ var oPopup = window.createPopup(); //IE5.5+ this.Pop = oPopup;

var w = this.width; var h = this.height;

// "×"关闭按钮 /* str += " " str += " " str += " " + this.caption + " " str += " " str += " × " str += " " */ // 按钮style // style='width:60px; height:20px; border-right: #002D96 1px solid; padding-right: 2px; border-top: #002D96 1px solid; padding-left: 2px; FONT-SIZE: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); border-left: #002D96 1px solid; CURSOR: hand; color: black; padding-top: 2px; border-bottom: #002D96 1px solid;'

var str = " " str += " "

str += " " str += " " str += " " + this.caption + " " str += " " str += " " /*height：设置里面内容区域的高度 */ str += " " str += " " + this.title + "

" str += " " + this.message + " - 有事您q我! " str += " " str += " " str += " " str += " " str += " " str += " " str += " <input type='button' title=关闭 value=确认 style='width:60px; height:20px; border-right: #002D96 1px solid; padding-right: 2px; border-top: #002D96 1px solid; padding-left: 2px; FONT-SIZE: 12px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); border-left: #002D96 1px solid; CURSOR: hand; color: black; padding-top: 2px; border-bottom: #002D96 1px solid;'> " str += " " str += " " str += " " str += " " str += " "

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=true;}

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.timeout--; if(me.timeout==0){ window.clearInterval(me.timer); if(me.autoHide){ me.hide(); } } } else { me.offset = me.offset me.step; } me.Pop.show(x,y,width,height); }

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

//"确认"关闭事件

var buttonClose = oPopup.document.getElementById("buttonClose"); buttonClose.onclick = function(){ me.close = true; me.hide(); } /* * "×"关闭事件 * var btClose = oPopup.document.getElementById("btSysClose"); * * btClose.onclick = function(){ * me.close = true; * me.hide(); * } */

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){} } var MSG1 = new CLASS_MSN_MESSAGE("aa",240,150,"管理员：","思路决定出路","迷失路上"); MSG1.rect(null,null,null,screen.height-50); MSG1.speed = 10; MSG1.step = 5; //alert(MSG1.top); //MSG1.show(); //同时两个有闪烁，只能用层代替了，不过层不跨框架 /* var MSG2 = new CLASS_MSN_MESSAGE("aa",200,120,"短消息提示：","您有2封消息","好的啊"); MSG2.rect(100,null,null,screen.height); MSG2.show(); */

/** * Show tooltip */ function showMSG(){ MSG1.show(); }

JS realizes that the prompt box similar to QQ news pops up on the scheduled page_javascript skills

Related articles