Jump to
[1]
[2]
[3]
[Full screen preview]
@charset "utf-8";
/* CSS Document */
/* ljtips 1.0 */
/* lujun idche@qq.com*/
/* 2010-10-8*/
.lj-tipsWrap,.lj-in,.lj-close {
display: inline-block;
color: #fff
}
.lj-tipsWrap {
background: #000;
filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity:0.6;
opacity : 0.6;
line-height: 1.6em;
padding: 10px 15px;
position: absolute;
text-align: left;
text-align: left;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.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: #fff;
font-size: 14px;
height: 9px;
width: 9px;
overflow: hidden;
line-height: 0.5em;
right: 0;
top: 0;
}
.lj-close:hover {
color: red;
}
.lj-top {
border-top: 10px solid #000;
bottom: -20px;
left: 3px;
}
.lj-top span {
border-top: 10px solid #000;
margin: -11px 0 0 -10px;
}
.lj-right {
border-right: 10px solid #000;
left: -20px;
top: 3px;
}
.lj-right span {
border-right: 10px solid #000;
margin: -10px 0 0 -9px;
}
.lj-bottom {
border-bottom: 10px solid #000;
top: -20px;
left: 3px;
}
.lj-bottom span {
border-bottom: 10px solid #000;
margin: -9px 0 0 -10px;
}
.lj-left {
border-left: 10px solid #000;
right: -21px;
top: 3px;
}
.lj-left span {
border-left: 10px solid #000;
margin: -10px 0 0 -11px;
}
.lj-left ~ .lj-close {
left: 0;
}
/*css 3 渐进增强*/
.lj-tipsWrap {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
2. [File] LJTIPS.html ~ 2KB Download(0) Jump to [1] [2] [3] [Full screen preview]
<!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>简单提示框插件</title>
<link href="ljtips.css" type="text/css" rel="stylesheet" />
</head>
<body style="text-align:center;">
<input type="text" id="test" style="margin:50px auto;" /><br/>
<input type="button" value="左弹出" onclick="a.show({content:'Hello World! This is LJTIPS.',p:'left',clear:true,time:1000})" title="1秒消失" />
<input type="button" value="右弹出" onclick="a.show({content:'Hello World! This is LJTIPS.<br/>换行',p:'right',clear:true,closeBtn:true})" title="有关闭按钮" />
<script type="text/javascript" src="ljtips.js"></script>
<script type="text/javascript">
/* 实例化调用*/
var a = ljtips('test');
a.show({content:'这里是LJTIPS弹出的提示<br>hello word',p:'right',clear:true,closeBtn:true});
</script>
<div style="text-align:left;" >
必须文件：ljtips.css,<br/>ljtips.js(JS请在页面最后加载，也就是DOM元素载入完成以后)
</div>
<dl style="text-align:left;">
<dt>ljtips();</dt>
<dd>参数:String 页面DOM 元素ID<br/>
element 页面DOm元素对象
</dd>
<dd>返回值:Object
{show,hide}
</dd>
<dl>.show()</dl>
<dd>参数{conteng:String,
p:String,
clear:boolean,
closeBtn:boolean,
time:1000
}</dd>
<dd>
conteng:提示内容,可以是HTML片段<br/>
p:提示的位置。可选参数[top,bottom.left,right] 默认right<br/>
clear:强制清除他已经存在的提示 默认 false<br/>
boolean:是否有关闭按钮 默认false<br/>
time:提示显示时间，单位毫秒 默认不消失<br/>
<br/>
</dd>
<dl>.hide()</dl>
<dd>清除当前对象上的提示，无参数</dd>
<dd><a href="#" onclick="ljtips(this).show({content:'行内调用',closeBtn:true});">点击我</a></dd>
</dl>
</body>
</html>
3. [File] ljtips.js ~ 3KB Download(0) Jump to [1] [2] [3] [Full screen preview]
// JavaScript Document
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 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 && !obj.clear)return false;
if(obj.clear)_this.clear(dg(prefix + rand));
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);
w.attachEvent ? 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);
// try{
w.attachEvent ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false);
// }catch(e){}
elem.lock = false;// 解除锁定
}
_this.hide = function(){
_this.clear(dg(prefix + rand));
}
return _this;
}
}();
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle Solution
2 weeks agoByDDD
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hot Tools
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
SublimeText3 English version
Recommended: Win version, supports code prompts!
SublimeText3 Mac version
God-level code editing software (SublimeText3)
