js实现右下角tips提示效果代码实例(兼容多种浏览器)-优快云博客

提示不难做，那个三角号样式很难调兼容，死了好多脑细胞预览主窗口提示错位，保存本地测比较好。

兼容性已经测过：IE6\IE7\IE8\FF3\CHROME10
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<body>

 

<input id='test'>

 

<a href='#' id='test2' onmouseover="tips.show('普通链接或按钮提示-灰色-鼠标离开消失-300像素', 'test2', null, '#000000', 300)" onmouseout="tips.hidden('test2')">普通链接或按钮提示</a>

<script>

//提示消息类

var tips = {

temp : {},

/***

* 弹出提示

*

* @param string msg 提示文字内容

* @param string id 要弹出提示的目标对象的id,如果id错误/null/false/0则主窗口弹出

* @param int time 定时消失时间毫秒数,如果为null/0/false则不定时

* @param string color 提示内容的背景颜色格式为#000000

* @param int width 提示窗宽度,默认300

*/

show : function(msg, id, time, color, width)

{

var target = this._get(id);

if(!target) { id = 'window'; }

//如果弹出过则移除重新弹出

if(this._get(id+'_tips')) { this.remove(id); }

//设置默认值

msg = msg || 'error';

color = color || '#ea0000';

width = width || 300;

time = time ? parseInt(time) : false;

if(id=='window') {

var y = document.body.clientHeight/2+document.body.scrollTop;

var x = (document.body.clientWidth-width)/2;

var textAlign = 'center', fontSize = '15',fontWeight = 'bold';

} else {

//获取对象坐标信息

for(var y=0,x=0; target!=null; y+=target.offsetTop, x+=target.offsetLeft, target=target.offsetParent);

var textAlign = 'left', fontSize = '12',fontWeight = 'normal';

}

//弹出提示

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);}});

document.body.appendChild(tipsDiv);

tipsDiv.style.top = (y-tipsDiv.offsetHeight-12)+'px';

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'}));

if(id!='window') {

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'});

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'}));

document.body.appendChild(arrow);

}

//标记已经弹出

this.temp[id] = id;

//如果定时关闭

if(time) { setTimeout(function(){tips.hidden(id);}, time) }

return id;

},

/***

* 隐藏提示

*

* @param string id 要隐藏提示的id,如果要www.3ppt.com隐藏主窗口提示id为window,如果要隐藏所有提示id为空即可

*/

hidden : function(id)

{

if(!id) { for(var i in this.temp) { this.hidden(i); } return; }

var t = this._get(id+'_text'), d = this._get(id+'_bg'), a = this._get(id+'_arrow');

if(t) { t.parentNode.removeChild(t); }

if(d) { d.parentNode.removeChild(d); }

if(a) { a.parentNode.removeChild(a); }

},

_create : function(set, attr)

{

var obj = document.createElement('div');

for(var i in set) { obj.style[i] = set[i]; }

for(var i in attr) { obj[i] = attr[i]; }

return obj;
},

_get : function(id)

{

return document.getElementById(id);

}

};

window.onload = function(){

tips.show('主窗口提示-绿色-不定时-300像素', null, null, '#009900', 300);

tips.show('表单报错提示-红色-3000毫秒消失-250像素', 'test', 3000, '#ea0000', 250);

}

document.onclick = function(){

tips.hidden();

}

</script>