Freshly baked js tips prompt effect_javascript skills

Compatibility has been tested: IE6IE7IE8FF3CHROME10

Copy code The code is as follows:

Normal link or button prompt

<script> <br>//Prompt message class<br>var tips = { <br>temp : {}, <br>/*** <br>* Pop-up prompt<br>* <br>* @param string msg Prompt text content<br>* @param string id The id of the target object to pop up the prompt. If the id is wrong/null/false/0, the main Window pop-up<br>* @param int time The scheduled disappearance time in milliseconds. If it is null/0/false, it will not be scheduled.<br>* @param string color The background color format of the prompt content is #000000 <br>* @param int width prompt window width, default 300 <br>*/ <br>show : function(msg, id, time, color, width) <br>{ <br>var target = this._get(id); <br>if(!target) { id = 'window'; } <br><br>//If it has popped up, remove it and pop it up again<br>if(this._get(id '_tips')) { this.remove (id); } <br><br>//Set the default value <br>msg = msg || 'error'; <br>color = color || '#ea0000'; <br>width = width || 300 ; <br>time = time ? parseInt(time) : false; <br><br>if(id=='window') { <br>var y = document.body.clientHeight/2 document.body.scrollTop; <br>var x = (document.body.clientWidth-width)/2; <br>var textAlign = 'center', fontSize = '15',fontWeight = 'bold'; <br>} else { <br>/ /Get object coordinate information<br>for(var y=0,x=0; target!=null; y =target.offsetTop, x =target.offsetLeft, target=target.offsetParent); <br>var textAlign = ' left', fontSize = '12',fontWeight = 'normal'; <br>} <br><br>//Pop-up prompt<br>var tipsDiv = this._create({display:'block',position:'absolute ',zIndex:'1001',width:(width-2) 'px',left:(x 1) 'px',padding:'5px',color:'#ffffff',fontSize:fontSize 'px',backgroundColor :color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id '_text', innerHTML:msg, onclick:function(){tips.hidden (id);}}); <br>document.body.appendChild(tipsDiv); <br>tipsDiv.style.top = (y-tipsDiv.offsetHeight-12) 'px'; <br>document.body.appendChild (this._create({display:'block',position:'absolute',zIndex:'1000',width:(width 10) 'px',height:(tipsDiv.offsetHeight-2) 'px',left:x 'px',top:(y-tipsDiv.offsetHeight-11) 'px',backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id '_bg'}) ); <br>if(id!='window') { <br>var arrow = this._create({display:'block',position:'absolute',overflow:'hidden',zIndex:'999', width:'20px',height:'10px',left:(x 20) 'px',top:(y-13) 'px'}, {id:id '_arrow'}); <br>arrow.appendChild (this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px solid ' color,borderRight:'10px solid #fff', borderLeft:' 10px solid #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'})); <br>document.body.appendChild(arrow); <br>} <br><br>// The mark has popped up<br>this.temp[id] = id; <br><br>//If the timer is turned off<br>if(time) { setTimeout(function(){tips.hidden(id);}, time ) } <br><br>return id; <br>}, <br>/*** <br>* Hide prompt <br>* <br>* @param string id The id of the prompt to be hidden. If you want to hide the main window, the prompt id is window. If you want to hide all prompts, the id can be empty <br>*/ <br>hidden : function(id) <br>{ <br>if(!id) { for (var i in this.temp) { this.hidden(i); } return; } <br>var t = this._get(id '_text'), d = this._get(id '_bg'), a = this._get(id '_arrow'); <br>if(t) { t.parentNode.removeChild(t); } <br>if(d) { d.parentNode.removeChild(d); } <br>if (a) { a.parentNode.removeChild(a); } <br>}, <br>_create : function(set, attr) <br>{ <br>var obj = document.createElement('div'); <br>for(var i in set) { obj.style[i] = set[i]; } <br>for(var i in attr) { obj[i] = attr[i]; } <br>return obj ; <br>}, <br>_get : function(id) <br>{ <br>return document.getElementById(id); <br>} <br>}; <br><br><br>window. onload = function(){ <br>tips.show('Main window tips-green-irregular-300 pixels', null, null, '#009900', 300); <br>tips.show('Form error tips - red - disappear in 3000 milliseconds - 250 pixels', 'test', 3000, '#ea0000', 250); <br>} <br>document.onclick = function(){ <br>tips.hidden(); <br>} <br></script>