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用例