jquery弹出插件
对于jquery弹出插件，想起自己刚学习js那会，在实习的时候做过一个，唉，做工太粗浅了。
点击看效果demo
(function($, window, document,undefined){
var dialogInfo = {
message: 'this ia a message', // 消息内容
style: 'info', // 弹窗类型
time: 1000, // 显示时间
model:false // 是否模态
};
$.gmNoticeWnd = function(opt) {
var settings = $.extend({}, dialogInfo, opt),
dialogHtml = "";
dialogHtml += '<div class = "notice alert" style = "width:200px; height:200px;padding:0px">'
+ "<div class = 'notice-head' style = 'height: 10px'>"
+ "<button type = 'button' class = 'close' style = 'display: none'>×</button>"
+ "</div>"
+"<br>"
+'<div style="text-align:center;margin-top:15px">'
+'<img id = "alertType" src = "/notice.js/img/check.png" style="text-align:center">'
+'</div>'
+ "<div class = 'notice-body'>"
+ "<p class='diap'>" + settings.message + "</p>"
+ "</div>"
+ '</div>';
var modalDialog = "<div class = 'noticecover' id = 'coverId' style = 'position: absolute; top: 0; left: 0; width:100%; height:100%; z-index: 99;'>" +
dialogHtml +
"</div>";
return (function setNotice() {
var noticeStyle = settings.style;
if (settings.model == false) {
$("body").append(dialogHtml);
$(".noticecover").css("background","#000000");
} else {
$("body").append(modalDialog);
$("button").css("display","block");
};
var $notice = $(".notice"),
noticeTop = (document.documentElement.clientHeight / 2) - $notice.height(),
noticeLeft = (document.documentElement.clientWidth / 2) - $notice.width() / 2;
$notice.css({"position": "absolute",
"top": noticeTop,
"left": noticeLeft,
});
switch (noticeStyle) {
case 'error':
$notice.addClass("alert-danger");
$('#alertType').attr('src','/notice.js/img/cross.png');
break;
case 'normal':
$notice.addClass("alert-success");
$('#alertType').attr('src','/notice.js/img/check.png');
break;
case 'warning':
$notice.addClass("alert-warning");
break;
default:
$notice.addClass("alert-info");
};
setTimeout(function() {
if (settings.model == false) {
$notice.remove();
} else {
$(".close").click(function() {
$(".noticecover").remove();
});
};
}, settings.time);
function setPosition() {
var fatherCover = document.getElementById("coverId"),
changedLeft = $(fatherCover).width() / 2 - $notice.width() / 2,
changedTop = $(fatherCover).height() / 2 - $notice.height() / 2;
$notice.css({"position": "absolute",
"top": changedTop,
"left": changedLeft,
});
}
if (window.addEventListener) {
window.addEventListener("resize", function() {
setPosition();
})
} else if (window.attachEvent) {
window.attachEvent("onresize", function() {
setPosition();
})
}
} ());
};
$.fn.appearDialog = function(opt) {
$.gmNoticeWnd(opt);
};
})(jQuery, window, document);
以上是我自己的源码，仅仅能满足提示的需求。
var TINY = {};
function T$(i) {
return document.getElementById(i)
}
TINY.box = function () {
var p, m, b, fn, ic, iu, iw, ih, ia, f = 0;
return {
show: function (c, u, w, h, a, t) {
if (!f) {
p = document.createElement('div');
p.id = 'tinybox';
m = document.createElement('div');
m.id = 'tinymask';
b = document.createElement('div');
b.id = 'tinycontent';
document.body.appendChild(m);
document.body.appendChild(p);
p.appendChild(b);
m.onclick = TINY.box.hide;
window.onresize = TINY.box.resize;
f = 1
}
if (!a && !u) {
p.style.width = w ? w + 'px' : 'auto';
p.style.height = h ? h + 'px' : 'auto';
p.style.backgroundImage = 'none';
b.innerHTML = c
} else {
b.style.display = 'none';
p.style.width = p.style.height = '100px'
}
this.mask();
ic = c;
iu = u;
iw = w;
ih = h;
ia = a;
this.alpha(m, 1, 80, 3);
if (t) {
setTimeout(function () {
TINY.box.hide()
}, 1000 * t)
}
},
fill: function (c, u, w, h, a) {
if (u) {
p.style.backgroundImage = '';
var x = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
x.onreadystatechange = function () {
if (x.readyState == 4 && x.status == 200) {
TINY.box.psh(x.responseText, w, h, a)
}
};
x.open('GET', c, 1);
x.send(null)
} else {
this.psh(c, w, h, a)
}
},
psh: function (c, w, h, a) {
if (a) {
if (!w || !h) {
var x = p.style.width,
y = p.style.height;
b.innerHTML = c;
p.style.width = w ? w + 'px' : '';
p.style.height = h ? h + 'px' : '';
b.style.display = '';
w = parseInt(b.offsetWidth);
h = parseInt(b.offsetHeight);
b.style.display = 'none';
p.style.width = x;
p.style.height = y;
} else {
b.innerHTML = c
}
this.size(p, w, h, 4)
} else {
p.style.backgroundImage = 'none'
}
},
hide: function () {
TINY.box.alpha(p, -1, 0, 5)
},
resize: function () {
TINY.box.pos();
TINY.box.mask()
},
mask: function () {
m.style.height = TINY.page.theight() + 'px';
m.style.width = '';
m.style.width = TINY.page.twidth() + 'px'
},
pos: function () {
var t = (TINY.page.height() / 2) - (p.offsetHeight / 2);
t = t < 10 ? 10 : t;
p.style.top = (t + TINY.page.top()) + 'px';
p.style.left = (TINY.page.width() / 2) - (p.offsetWidth / 2) + 'px'
},
alpha: function (e, d, a, s) {
clearInterval(e.ai);
if (d == 1) {
e.style.opacity = 0;
e.style.filter = 'alpha(opacity=0)';
e.style.display = 'block';
this.pos()
}
e.ai = setInterval(function () {
TINY.box.twalpha(e, a, d, s)
}, 20)
},
twalpha: function (e, a, d, s) {
var o = Math.round(e.style.opacity * 100);
if (o == a) {
clearInterval(e.ai);
if (d == -1) {
e.style.display = 'none';
e == p ? TINY.box.alpha(m, -1, 0, 3) : b.innerHTML = p.style.backgroundImage = ''
} else {
e == m ? this.alpha(p, 1, 100, 5) : TINY.box.fill(ic, iu, iw, ih, ia)
}
} else {
var n = o + Math.ceil(Math.abs(a - o) / s) * d;
e.style.opacity = n / 100;
e.style.filter = 'alpha(opacity=' + n + ')'
}
},
size: function (e, w, h, s) {
e = typeof e == 'object' ? e : T$(e);
clearInterval(e.si);
var ow = e.offsetWidth,
oh = e.offsetHeight,
wo = ow - parseInt(e.style.width),
ho = oh - parseInt(e.style.height);
var wd = ow - wo > w ? -1 : 1,
hd = (oh - ho > h) ? -1 : 1;
e.si = setInterval(function () {
TINY.box.twsize(e, w, wo, wd, h, ho, hd, s)
}, 20)
},
twsize: function (e, w, wo, wd, h, ho, hd, s) {
var ow = e.offsetWidth - wo,
oh = e.offsetHeight - ho;
if (ow == w && oh == h) {
clearInterval(e.si);
p.style.backgroundImage = 'none';
b.style.display = 'block'
} else {
if (ow != w) {
e.style.width = ow + (Math.ceil(Math.abs(w - ow) / s) * wd) + 'px'
}
if (oh != h) {
e.style.height = oh + (Math.ceil(Math.abs(h - oh) / s) * hd) + 'px'
}
this.pos()
}
}
}
}();
TINY.page = function () {
return {
top: function () {
return document.body.scrollTop || document.documentElement.scrollTop
},
width: function () {
return self.innerWidth || document.documentElement.clientWidth
},
height: function () {
return self.innerHeight || document.documentElement.clientHeight
},
theight: function () {
var d = document,
b = d.body,
e = d.documentElement;
return Math.max(Math.max(b.scrollHeight, e.scrollHeight), Math.max(b.clientHeight, e.clientHeight))
},
twidth: function () {
var d = document,
b = d.body,
e = d.documentElement;
return Math.max(Math.max(b.scrollWidth, e.scrollWidth), Math.max(b.clientWidth, e.clientWidth))
}
}
}();
这个是别人做的一个弹出插件，写的比我好太多了。值得学习。也不依赖于jquery。
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实现弹出层效果</title>
<style type="text/css">
.title{
background:#eeeeee;
border:1px solid #cccccc;
padding:1em;
margin-bottom: 25px;
}
.content{
padding:1em;
}
#tinybox{
position:absolute;
display:none;
padding:10px;
background:#ffffff url(../image/preload.gif) no-repeat 50% 50%;
border:10px solid #e3e3e3;
z-index:2000;
}
#tinymask{
position:absolute;
display:none;
top:0; left:0;
height:100%;
width:100%;
background:#000000;
z-index:1500;
}
#tinycontent{background:#ffffff; font-size:1.1em;}
</style>
<script type="text/javascript" src="../js/tinybox.js"></script>
</head>
<body>
<div class="title">
<b>加载一个静态页面</b>
<a title="加载一个静态页面，这里可能无法测试出来，在服务器项目里可以看见效果" href="# " id="click_test1">效果预览</a>
</div>
<div class="title">
<b>图片</b>
<a title="用酷酷的浮动层显示图片" href="# " id="click_test2">效果预览</a>
</div>
<div class="title">
<b>显示flash</b>
<a title="用酷酷的浮动层显示flash" href="# " id="click_test3">效果预览</a>
</div>
<div class="title">
<b>自动隐藏</b>
<a title="层显示一段时间后自动隐藏，当作操作提示用是个很不错的选择" href="# " id="click_test4">效果预览</a>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$('#click_test1').click(function(e) {
TINY.box.show('blank-for-test.html', 1, 300, 150, 1);
});
var content2 = "<img width='640' height='466' src='../../pic&wordLineInMiddle/images/img4.jpg' />";
$('#click_test2').click(function(e) {
TINY.box.show(content2, 0, 0, 0, 1);
});
var content3 = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='550' height='400'><param name='movie' value='../flash/as3_clock_2.swf' /><param name='quality' value='high' /><param name='wmode' value='opaque' /><embed height='400' width='550' src='../flash/as3_clock_2.swf' type='application/x-shockwave-flash'></embed></object>";
$('#click_test3').click(function(e) {
TINY.box.show(content3, 0, 0, 0, 1);
});
var content4 = "该浮动层将在3秒钟内消失。";
$('#click_test4').click(function(e) {
TINY.box.show(content4, 0, 0, 0, 0, 3);
});
</script>
</body>
</html>
附上自己的demo用例
夕阳下的奔跑，那是我逝去的青春
