Tips 带三角可关闭的文字提示

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Tips，带三角可关闭的文字提示</title> 
</head> 
<body> 
<style type="text/css"> 
body{ font-size:12px;} 
.lj-tipsWrap,.lj-in,.lj-close{display:inline-block;} 
.lj-tipsWrap{background:#F4FBFF;line-height:1.5em;padding:5px 15px;border:1px solid #2192D3;position:absolute;text-align:left;} 
.lj-in{position:absolute;zoom:1;border:10px dashed transparent;width:0px;height:0px;} 
.lj-in span{zoom:1;width:0px;height:0px;overflow:hidden;} 
.lj-close{position:absolute; text-decoration:none;color:#000;font-size:14px; height:9px; width:9px; overflow:hidden;line-height:0.5em; right:0; top:0;} 
.lj-close:hover{color:#39F;} 
.lj-top{border-top:10px solid #2192D3;bottom:-20px; left:3px;} 
.lj-top span{border-top:10px solid #F4FBFF;margin:-11px 0 0 -10px;} 
.lj-right{border-right:10px solid #2192D3;left:-20px; top:3px;} 
.lj-right span{border-right:10px solid #F4FBFF;margin:-10px 0 0 -9px;} 
.lj-bottom{border-bottom:10px solid #2192D3;top:-20px; left:3px;} 
.lj-bottom span{border-bottom:10px solid #F4FBFF;margin:-9px 0 0 -10px;} 
.lj-left{border-left:10px solid #2192D3;right:-20px; top:3px; } 
.lj-left span{border-left:10px solid #F4FBFF;margin:-10px 0 0 -11px;} 
.lj-left ~ .lj-close{left:0;}

/*css 3 渐进增强*/ 
.lj-tipsWrap{-webkit-border-radius:3px;-moz-border-radius:3px;-webkit-box-shadow:2px 2px 3px #eee;-moz-box-shadow:2px 2px 3px #eee;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Awindow.ljtips%3Dfunction()%7Bvar%20i%3Ddocument.body%2Cj%3Ddocument.documentElement%2Cn%3D%2Fmsie%5Cs(%5B%5Cd%5C.%5D%2B)%2F.test(navigator.userAgent.toLowerCase())%2Ck%3Dwindow%3Breturn%20function(l)%7Bvar%20c%3Dl%3Ftypeof%20l%3D%3D%22string%22%3Fdocument.getElementById(l)%3Al%3Athis%2Cd%3Dnull%2Cs%3Dc.offsetWidth%2Ct%3Dc.offsetHeight%2Cm%3D0%2Cg%3Dnull%2Ce%3D%7B%7D%2Co%3D%7Bleft%3Afunction(a)%7Breturn%7Btop%3Ad.top%2Cleft%3Ad.left-a-15%7D%7D%2Ctop%3Afunction(a%2Ch)%7Breturn%7Btop%3Ad.top-h-15%2Cleft%3Ad.left%7D%7D%2Cright%3Afunction()%7Breturn%7Btop%3Ad.top%2Cleft%3Ad.left%2Bs%2B15%7D%7D%2Cbottom%3Afunction()%7Breturn%7Btop%3Ad.top%2Bt%2B15%2Cleft%3Ad.left%7D%7D%7D%3Be.show%3D%20%0D%0Afunction(a)%7Bif(c.lock)c.lock%3Dfalse%3Belse%7Bc.lock%3Dtrue%3Bd%3Dc.getBoundingClientRect()%3Bvar%20h%3Di.scrollTop%2Bj.scrollTop%2Cf%3Di.scrollLeft%2Bj.scrollLeft%3Ba.p%3Da.p%7C%7C%22right%22%3Bvar%20b%3De.append(a.p%2Ca.closeBtn%7C%7Cfalse)%3Bb.getElementsByTagName(%22DIV%22)%5B0%5D.innerHTML%3Da.content%3Bvar%20p%3Do%5Ba.p%5D(b.offsetWidth%2Cb.offsetHeight)%3Bb.style.top%3Dp.top%2Bh%2B%22px%22%3Bb.style.left%3Dp.left%2Bf%2B%22px%22%3Ba.time%26%26setTimeout(function()%7Be.clear(document.getElementById(%22lj%22%2Bm))%7D%2Ca.time)%3Ba.fn%26%26a.fn.call(c%2Cdocument.getElementById(%22lj%22%2Bm))%3Bg%3Dfunction(w%2Cq)%7Breturn%20function()%7Bvar%20u%3D%20%0D%0Ai.scrollTop%2Bj.scrollTop%2Cv%3Di.scrollLeft%2Bj.scrollLeft%3Bd%3Dc.getBoundingClientRect()%3Bvar%20r%3Do%5Ba.p%5D(b.offsetWidth%2Cb.offsetHeight)%3Bq.style.top%3Dr.top%2Bu%2B%22px%22%3Bq.style.left%3Dr.left%2Bv%2B%22px%22%7D%7D(c%2Cb)%3Bn%3Fk.attachEvent(%22onresize%22%2Cg)%3Ak.addEventListener(%22resize%22%2Cg%2Cfalse)%7D%7D%3Be.append%3Dfunction(a%2Ch)%7Bvar%20f%3Dm%3DMath.floor(Math.random()*1E4)%2Cb%3Ddocument.createElement(%22DIV%22)%3Bb.id%3D%22lj%22%2Bf%3Bb.innerHTML%3D'%3Cdiv%20class%3D%22lj-tipsWrap%22%20id%3D%22tipsWrap-%3C%25%3Dr%25%3E%22%3E%3Cdiv%3E%3C%2Fdiv%3E%3Cspan%20class%3D%22lj-in%20lj-%3C%25%3Dp%25%3E%22%3E%3Cspan%20class%3D%22lj-in%22%3E%3C%2Fspan%3E%3C%2Fspan%3E%3Ca%20href%3D%22javascript%3Avoid(0)%22%20id%3D%22ljClose%3C%25%3Dr%25%3E%22%20class%3D%22lj-close%22%3Ex%3C%2Fa%3E%3C%2Fdiv%3E'.replace(%22%3C%25%3Dp%25%3E%22%2C%20%0D%0Aa).replace(%2F%3C%25%3Dr%25%3E%2Fg%2Cf)%3Bdocument.body.appendChild(b)%3Bif(h)document.getElementById(%22ljClose%22%2Bf).onclick%3De.hide%3Belse%20document.getElementById(%22ljClose%22%2Bf).style.display%3D%22none%22%3Breturn%20document.getElementById(%22tipsWrap-%22%2Bf)%7D%3Be.clear%3Dfunction(a)%7Ba%26%26a.parentNode%26%26a.parentNode.removeChild(a)%3Bn%3Fk.detachEvent(%22onresize%22%2Cg)%3Ak.removeEventListener(%22resize%22%2Cg%2Cfalse)%3Bc.lock%3Dfalse%7D%3Be.hide%3Dfunction()%7Be.clear(document.getElementById(%22lj%22%2Bm))%7D%3Breturn%20e%7D%7D()%3B%20%0D%0A%3C%2Fscript%3E"> 
<!--这里是没有压缩的代码 window.ljtips = function(){ 
var html = "<div class=\"lj-tipsWrap\" id=\"tipsWrap-<%=r%>\">\ 
<div></div>\ 
<span class=\"lj-in lj-<%=p%>\"><span class=\"lj-in\"></span></span>\ 
<a href=\"javascript:void(0)\" id=\"ljClose<%=r%>\" class=\"lj-close\">x</a>\ 
</div>"; 
var dg = function(id){return document.getElementById(id);}; 
var dt = function(parent, nodeName){return parent.getElementsByTagName(nodeName);}; 
var db = document.body; 
var dd = document.documentElement; 
var of = 15;// 偏移量 
var prefix = 'lj';// 前缀 
var isie = /msie\s([\d\.]+)/.test(navigator.userAgent.toLowerCase()); 
var w = window; 
var lock = true;// 锁定同一对象 多次弹出提示 
return function(id){ 
var elem = id ? typeof id == "string" ? dg(id) : id : this; 
var offset = null; 
var width = elem.offsetWidth; 
var height = elem.offsetHeight; 
var rand = 0;// 随即值 
var func = null;// 窗口变化绑定的函数 
var _this = {}; 
var pos = { 
left : function(w, h){return {top:offset.top , left:offset.left - w - of}}, 
top : function(w, h){return {top:offset.top - h - of, left:offset.left}}, 
right : function(w, h){return {top:offset.top , left:offset.left + width + of}}, 
bottom : function(w, h){return {top:offset.top + height + of , left:offset.left}} 
};

_this.show = function(obj){ 
if(elem.lock){ 
elem.lock=false;return; 
}else elem.lock=true; 
offset = elem.getBoundingClientRect(); 
var top = db.scrollTop + dd.scrollTop; 
var left= db.scrollLeft + dd.scrollLeft; 
obj.p = obj.p || 'right'; 
var wrap = _this.append(obj.p, obj.closeBtn || false); 
dt(wrap, "DIV")[0].innerHTML = obj.content; 
var p = pos[obj.p](wrap.offsetWidth,wrap.offsetHeight); 
wrap.style.top = p.top + top + "px"; 
wrap.style.left = p.left + left + "px"; 
obj.time && setTimeout(function(){_this.clear(dg(prefix+rand));}, obj.time); 
obj.fn && obj.fn.call(elem, dg(prefix+rand)); 
//--检测窗口发生变化 
func = function(a, b){ 
return function(){ 
var top = db.scrollTop + dd.scrollTop; 
var left= db.scrollLeft + dd.scrollLeft; 
offset = elem.getBoundingClientRect(); 
var c = pos[obj.p](wrap.offsetWidth, wrap.offsetHeight); 
b.style.top = c.top + top + 'px'; 
b.style.left = c.left + left + 'px'; 
} 
}(elem, wrap); 
isie ? w.attachEvent('onresize', func) : w.addEventListener('resize', func, false); 
} 
_this.append = function(p,closeBtn){ 
var r = rand = Math.floor(Math.random() * 10000); 
var x = document.createElement("DIV"); 
x.id = prefix + r; 
x.innerHTML = html.replace("<%=p%>",p).replace(/<%=r%>/g,r); 
document.body.appendChild(x); 
if(closeBtn){ 
dg("ljClose"+r).onclick = _this.hide; 
}else{ 
dg("ljClose"+r).style.display = "none"; 
} 
return dg("tipsWrap-" + r); 
}

_this.clear = function(a){ 
a && a.parentNode && a.parentNode.removeChild(a); 
isie ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false); 
elem.lock = false;// 解除锁定 
} 
_this.hide = function(){ 
_this.clear(dg(prefix + rand)); 
} 
return _this; 
} 
}(); 
-->

<h2>请划过或点击下面带框的文本</h2> 
<span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test1">看我这里一个DIV</span><br> 
<input style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" value="点击我" id="test2"><br> 
<span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test3">提示在我的下面出现</span><br> 
<span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test4">提示在左边出现</span><br> 
<span style="display:inline-block; padding:5px; border:1px solid #CCC;margin:30px 30px 30px 100px;" id="test5">提示出现2秒后会自动消失</span><br> 
<span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test6">提示可以有关闭按钮</span><br> 
<div style="text-align:center;"> 
<span style="display:inline-block; padding:5px; border:1px solid #CCC; margin:30px 30px 30px 100px;" id="test7">不同担心页面放大缩小会位置会偏移哦</span><br> 
</div> 
<h2>优点</h2> 
<ul> 
<li>1：兼容 各种浏览器</li> 
<li>2：自己定义TIPS样式(颜色),CSS3渐进增强</li> 
<li>3：多方向弹出提示</li> 
<li>4：纯CSS+javascript(不包含任何图片)</li> 
<li>5：体积超级小 CSS+js = 3k</li> 
</ul> 
<h2>参数配置</h2> 
<ul> 
<li>ljtips(object).show(JSON)</li> 
<li>object: DOM对象ID(test1), DOM对象</li> 
<li><pre> 
json:{ 
content:提示的消息内容(必须), 
p:提示框位置(可选值top left bottom right),默认为right(可选), 
closeBtn:是否有关闭按钮(true false) 默认值(false)(可选), 
time:多少毫秒提示框消失(可选) 
} 
</pre></li> 
</ul> 
<h3>使用说明</h3> 
<ul> 
<li>主要方法 .show(); .hide();.clear(); 一般你只需要使用show,hide;</li> 
<li>使用1</li> 
<li>首先实例化一个ljtips(var tips=ljtips('test1')); 然后使用tips.show(JSON)</li> 
<li>使用2</li> 
<li>在行内调用提示框"<div onclick=" ljtips(this).show(JSON); "></div>"</li> 
<li>使用3</li> 
<li>在JS里调用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧！没有关闭按钮！",p:'right'})};</li> 
</ul> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20test1%20%3D%20ljtips('test1')%3B%20%0D%0Adocument.getElementById(%22test1%22).onmouseover%20%3D%20function()%7Btest1.show(%7Bcontent%3A%22%E9%BC%A0%E6%A0%87%E5%88%92%E8%BF%87%E6%97%B6%E5%80%99%E7%9A%84TIPS...%3Cbr%3E%E5%85%BC%E5%AE%B9%E4%B8%BB%E6%B5%81%E6%B5%8F%E8%A7%88%E5%99%A8%20IE%206%207%208%20chorme%20Firefox%20Opera%20Safari%22%7D)%7D%3B%20%0D%0Adocument.getElementById(%22test1%22).onmouseout%20%3D%20function()%7Btest1.hide()%3B%7D%3B%20%0D%0Adocument.getElementById(%22test2%22).onfocus%20%3D%20function()%7Bljtips(this).show(%7Bcontent%3A%22%E8%BF%99%E4%B8%AA%E6%8F%90%E7%A4%BA%E4%BC%9A%E5%9C%A8%3Cbr%3Einput%E7%9A%84%E4%B8%8A%E6%96%B9%EF%BC%81%E6%9C%89%E4%B8%AA%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE%E5%93%A6%22%2Cp%3A'top'%2CcloseBtn%3Atrue%7D)%7D%3B%20%0D%0Adocument.getElementById(%22test3%22).onmouseover%20%3D%20function()%7Bljtips(this).show(%7Bcontent%3A%22%E6%88%91%E5%9C%A8%E4%B8%8B%E9%9D%A2%E5%87%BA%E7%8E%B0%E4%BA%86%EF%BC%81%E4%B8%8D%E8%A6%81%E8%AE%A4%E4%B8%BA%E4%BC%9A%E7%94%A8%E5%88%B0%E5%9B%BE%E7%89%87%E5%93%A6%EF%BC%81%22%2Cp%3A'bottom'%2CcloseBtn%3Atrue%7D)%7D%3B%20%0D%0Adocument.getElementById(%22test4%22).onmouseover%20%3D%20function()%7Bljtips(this).show(%7Bcontent%3A%22%E6%88%91%E5%8F%AF%E4%BB%A5%E5%9C%A84%E4%B8%AA%E6%96%B9%E5%90%91%E4%B8%8A%22%2Cp%3A'left'%2CcloseBtn%3Atrue%7D)%7D%3B%20%0D%0Adocument.getElementById(%22test5%22).onmouseover%20%3D%20function()%7Bljtips(this).show(%7Bcontent%3A%22%E6%8F%90%E7%A4%BA%E5%87%BA%E7%8E%B02%E7%A7%92%E5%90%8E%E4%BC%9A%E8%87%AA%E5%8A%A8%E6%B6%88%E5%A4%B1%22%2Cp%3A'bottom'%2Ctime%3A2000%7D)%7D%3B%20%0D%0Adocument.getElementById(%22test6%22).onmouseover%20%3D%20function()%7Bljtips(this).show(%7Bcontent%3A%22%E8%BF%99%E4%B8%AA%E6%A1%86%E4%BD%A0%E5%85%B3%E4%B8%8D%E6%8E%89%E4%BA%86%E5%90%A7%EF%BC%81%E6%B2%A1%E6%9C%89%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE%EF%BC%81%22%2Cp%3A'right'%7D)%7D%3B%20%0D%0Adocument.getElementById(%22test7%22).onmouseover%20%3D%20function()%7Bljtips(this).show(%7Bcontent%3A%22%E6%82%A8%E5%8F%AF%E4%BB%A5%E6%94%BE%E5%A4%A7%E6%88%96%E8%80%85%E7%BC%A9%E5%B0%8F%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%EF%BC%81%3Cbr%3E%E4%BB%96%E4%BC%9A%E8%B7%9F%E9%9A%8F%E8%BF%99%E4%B8%AA%E7%BB%9D%E5%AF%B9%E4%BD%8D%E7%BD%AE%2C%E4%B8%8D%E4%BC%9A%E6%9C%89%E4%B8%9D%E6%AF%AB%E5%81%8F%E5%B7%AE%E3%80%82%22%2Cp%3A'right'%2CcloseBtn%3Atrue%7D)%7D%3B%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程