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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>
<script type="text/javascript">
window.ljtips=function(){var i=document.body,j=document.documentElement,n=/msie\s([\d\.]+)/.test(navigator.userAgent.toLowerCase()),k=window;return function(l){var c=l?typeof l=="string"?document.getElementById(l):l:this,d=null,s=c.offsetWidth,t=c.offsetHeight,m=0,g=null,e={},o={left:function(a){return{top:d.top,left:d.left-a-15}},top:function(a,h){return{top:d.top-h-15,left:d.left}},right:function(){return{top:d.top,left:d.left+s+15}},bottom:function(){return{top:d.top+t+15,left:d.left}}};e.show=
function(a){if(c.lock)c.lock=false;else{c.lock=true;d=c.getBoundingClientRect();var h=i.scrollTop+j.scrollTop,f=i.scrollLeft+j.scrollLeft;a.p=a.p||"right";var b=e.append(a.p,a.closeBtn||false);b.getElementsByTagName("DIV")[0].innerHTML=a.content;var p=o[a.p](b.offsetWidth,b.offsetHeight);b.style.top=p.top+h+"px";b.style.left=p.left+f+"px";a.time&&setTimeout(function(){e.clear(document.getElementById("lj"+m))},a.time);a.fn&&a.fn.call(c,document.getElementById("lj"+m));g=function(w,q){return function(){var u=
i.scrollTop+j.scrollTop,v=i.scrollLeft+j.scrollLeft;d=c.getBoundingClientRect();var r=o[a.p](b.offsetWidth,b.offsetHeight);q.style.top=r.top+u+"px";q.style.left=r.left+v+"px"}}(c,b);n?k.attachEvent("onresize",g):k.addEventListener("resize",g,false)}};e.append=function(a,h){var f=m=Math.floor(Math.random()*1E4),b=document.createElement("DIV");b.id="lj"+f;b.innerHTML='<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>'.replace("<%=p%>",
a).replace(/<%=r%>/g,f);document.body.appendChild(b);if(h)document.getElementById("ljClose"+f).onclick=e.hide;else document.getElementById("ljClose"+f).style.display="none";return document.getElementById("tipsWrap-"+f)};e.clear=function(a){a&&a.parentNode&&a.parentNode.removeChild(a);n?k.detachEvent("onresize",g):k.removeEventListener("resize",g,false);c.lock=false};e.hide=function(){e.clear(document.getElementById("lj"+m))};return e}}();
</script>
<!--这里是没有压缩的代码	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>在行内调用提示框“&lt;div onclick=&quot; ljtips(this).show(JSON); &quot;&gt;&lt;/div&gt;”</li>
	<li>使用3</li>
	<li>在JS里调用document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧！没有关闭按钮！",p:'right'})};</li>
</ul>
<script type="text/javascript">
	var test1 = ljtips('test1');
	document.getElementById("test1").onmouseover = function(){test1.show({content:"鼠标划过时候的TIPS...<br/>兼容主流浏览器 IE 6 7 8 chorme Firefox Opera Safari"})};
	document.getElementById("test1").onmouseout = function(){test1.hide();};
	document.getElementById("test2").onfocus = function(){ljtips(this).show({content:"这个提示会在<br/>input的上方！有个关闭按钮哦",p:'top',closeBtn:true})};
	document.getElementById("test3").onmouseover = function(){ljtips(this).show({content:"我在下面出现了！不要认为会用到图片哦！",p:'bottom',closeBtn:true})};
	document.getElementById("test4").onmouseover = function(){ljtips(this).show({content:"我可以在4个方向上",p:'left',closeBtn:true})};
	document.getElementById("test5").onmouseover = function(){ljtips(this).show({content:"提示出现2秒后会自动消失",p:'bottom',time:2000})};
	document.getElementById("test6").onmouseover = function(){ljtips(this).show({content:"这个框你关不掉了吧！没有关闭按钮！",p:'right'})};
	document.getElementById("test7").onmouseover = function(){ljtips(this).show({content:"您可以放大或者缩小浏览器窗口！<br/>他会跟随这个绝对位置,不会有丝毫偏差。",p:'right',closeBtn:true})};
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

表格图层

描述

多功能Tips，带小三角的文字提示，可关闭，有两套颜色方案可选择，可按你的要求将显示框定义显示在四个方向，放大或缩小浏览器窗口，不会有丝毫偏差。