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