一个非常好用的原生js tips提示窗，不依赖任何组件

最新推荐文章于 2024-07-15 10:15:15 发布

zhoushengbin3

最新推荐文章于 2024-07-15 10:15:15 发布

阅读量3.5k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhoushengbin3/article/details/81837201

版权

javascript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">标题</h1>
		</header>
<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;} 


.mui-content input{
	
margin-bottom: 30px;	
}
</style> 
		<div class="mui-content" style="text-align: center;">
		<br>
		<br>
		<br>
		
		 <input type="" name="" id="test1" value="" />
		 <input type="" name="" id="test2" value="" />
		 <input type="" name="" id="test3" value="" />
		 <input type="" name="" id="test4" value="" />
		 <input type="" name="" id="test5" value="" />
		 <input type="" name="" id="test6" value="" />
		 <input type="" name="" id="test7" value="" />
		</div>
		
		
		
		<script src="js/mui.min.js"></script>

<script type="text/javascript"> 

window.ljtips=function(){var i=document.body,j=document.documentElement,n=/msies([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}}(); 



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})}; 
	
	
			mui.init()
		</script>
	</body>

</html>

zhoushengbin3

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个非常好用的原生js tips提示窗，不依赖任何组件

&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content="width=device-width,initial-scal
复制链接

扫一扫

专栏目录