對于jquery彈出插件，想起自己剛學(xué)習(xí)js那會，在實習(xí)的時候做過一個，唉，做工太粗淺了。

點擊看效果demo

(function($, window, document,undefined){ var dialogInfo = {message: 'this ia a message', // 消息內(nèi)容style: 'info', // 彈窗類型time: 1000, // 顯示時間model:false // 是否模態(tài)};$.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))}} }();

　　這個是別人做的一個彈出插件，寫的比我好太多了。值得學(xué)習(xí)。也不依賴于jquery。

<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery實現(xiàn)彈出層效果</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>加載一個靜態(tài)頁面</b><a title="加載一個靜態(tài)頁面，這里可能無法測試出來，在服務(wù)器項目里可以看見效果" href="# " id="click_test1">效果預(yù)覽</a></div><div class="title"><b>圖片</b><a title="用酷酷的浮動層顯示圖片" href="# " id="click_test2">效果預(yù)覽</a></div><div class="title"><b>顯示flash</b><a title="用酷酷的浮動層顯示flash" href="# " id="click_test3">效果預(yù)覽</a></div><div class="title"><b>自動隱藏</b><a title="層顯示一段時間后自動隱藏，當(dāng)作操作提示用是個很不錯的選擇" href="# " id="click_test4">效果預(yù)覽</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秒鐘內(nèi)消失。";$('#click_test4').click(function(e) {TINY.box.show(content4, 0, 0, 0, 0, 3);});</script> </body> </html>

　　附上自己的demo用例

轉(zhuǎn)載于:https://www.cnblogs.com/lemon-zhang/p/7985931.html

總結(jié)

以上是生活随笔為你收集整理的jquery弹出插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。