집 > 기사 > 웹 프론트엔드 > 팁 닫을 수 있는 삼각형이 포함된 텍스트 팁_레이아웃 및 레이어

팁 닫을 수 있는 삼각형이 포함된 텍스트 팁_레이아웃 및 레이어

WBOY원래의: 2016-05-16 18:18:571252검색

/*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>
<!--这里是没有压缩的代码 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%>
</a>" class="lj-close">x</div>
<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>";
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 = 15; // 오프셋
var 접두사 = 'lj' // 접두사
var isie = /msies([d.] )/.test(navigator.userAgent.toLowerCase());
var w = 창;
var lock = true; // 동일한 객체를 잠그면 여러 프롬프트가 나타납니다.
반환 함수(id){
var elem = id ? typeof id == "string" ? dg(id) : id : this;
var 오프셋 = null;
var 너비 = elem.offsetWidth;
var 높이 = elem.offsetHeight;
var rand = 0; // 임의의 값
var func = null; // 창 변경에 바인딩된 함수
var _this = {};
변수 위치 = {
왼쪽 : 함수(w, h){return {top:offset.top , left:offset.left - w - of}},
top : 함수(w, h){return {top:offset.top - h - of, left:offset.left}},
오른쪽 : 함수(w, h){return {top:offset.top , left:offset.left 너비}},
하단 : 함수(w, h){return {top:offset.top height of , left:offset.left}}
};

_this.show = 함수(obj){
if(elem.lock){
elem.lock=false;return;
}else elem.lock=true;
오프셋 = elem.getBoundingClientRect();
var top = db.scrollTop dd.scrollTop;
var 왼쪽= db.scrollLeft dd.scrollLeft;
obj.p = obj.p ||
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 상단 "px";
Wrap.style.left = p.left 왼쪽 "px";
obj.time && setTimeout(function(){_this.clear(dg(prefix rand));}, obj.time);
obj.fn && obj.fn.call(elem, dg(접두사 rand));
//--탐지 창 변경
func = 함수(a, b){
반환 함수(){
var top = db.scrollTop dd.scrollTop;
var 왼쪽= db.scrollLeft dd.scrollLeft;
오프셋 = elem.getBoundingClientRect();
var c = pos[obj.p](wrap.offsetWidth, Wrap.offsetHeight);
b.style.top = c.top 상단 'px';
b.style.left = c.left 왼쪽 'px';
}
}(요소, 랩);
isie ? w.attachEvent('onresize', func) : w.addEventListener('resize', func, false);
}
_this.append = 함수(p,closeBtn){
var r = rand = Math.floor(Math.random() * 10000);
var x = document.createElement("DIV");
x.id = 접두사 r;
x.innerHTML = html.replace("<%=p%>",p).replace(/<%=r%>/g,r);
document.body.appendChild(x);
if(closeBtn){
dg("ljClose" r).onclick = _this.hide;
}또 다른{
dg("ljClose" r).style.display = "없음";
}
return dg("tipsWrap-" r);
}

_this.clear = 함수(a){
a && a.parentNode && a.parentNode.removeChild(a);
isie ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false);
elem.lock = false; // 잠금해제
}
_this.hide = 함수(){
_this.clear(dg(접두사 랜드));
}
_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 class="brush:php;toolbar:false"> 
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> 
<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>

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

성명：

이전 기사：JavaScript는 여러 browser_javascript 기술과 호환되는 키보드의 Enter 이벤트(모든 키보드 이벤트)를 작동합니다.다음 기사：JavaScript는 여러 browser_javascript 기술과 호환되는 키보드의 Enter 이벤트(모든 키보드 이벤트)를 작동합니다.

팁 닫을 수 있는 삼각형이 포함된 텍스트 팁_레이아웃 및 레이어

관련 기사