最近在研究彈出層插件時發現網上很多插件功能很強大，同時插件也很龐大。在這里個人寫了一個比較秀珍的彈出層插件。
jquery.popdialog.js
$(function () {$.fn.PopDialog = function (options) {var defaults = {Event: "click", //觸發響應事件title: "title", //彈出層的標題type: "text", //彈出層類型(text、容器ID、URL、Iframe)content: "content", //彈出層的內容(text文本、容器ID名稱、URL地址、Iframe的地址)width: 500, //彈出層的寬度height: 400, //彈出層的高度scrollTop: 200, //層滑動的高度也就是彈出層時離頂部滑動的距離isAuto: false, //是否自動彈出time: 2000, //設置自動彈出層時間，前提是isAuto=trueisClose: false, //是否自動關閉 timeOut: 2000 //設置自動關閉時間，前提是isClose=true};var options = $.extend(defaults, options);$("body").prepend("<div id='floatBoxBg'></div><div id='floatBox' class='floatBox'><div class='title'><h4></h4><span id='closeDialog'>X</span></div><div class='content'></div></div>");var $this = $(this); //當然響應事件對象var $blank = $("#floatBoxBg"); //遮罩層對象var $title = $("#floatBox .title h4"); //彈出層標題對象var $content = $("#floatBox .content"); //彈出層內容對象var $dialog = $("#floatBox"); //彈出層對象var $close = $("#closeDialog"); //關閉層按鈕對象var stc, st;if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) {//判斷IE6$blank.css({ height: $(document).height(), width: $(document).width() });}$close.live("click", function () {$blank.animate({ opacity: "0" }, "normal", function () { $(this).hide(); });$dialog.animate({ top: ($(document).scrollTop() - parseInt(options.height)) + "px" }, "normal", function () { $(this).hide(); });if (st) {clearTimeout(st); //清除定時器}if (stc) {clearTimeout(stc); //清除定時器}});$content.css("height", parseInt(options.height) - 70);//文本框綁定事件$this.live(options.Event, function (e) {$title.html(options.title);switch (options.type) {case "url": //當類型是地址的時候 $content.ajaxStart(function () {$(this).html("loading...");});$.get(options.content, function (html) {$content.html(html);});break;case "text": //當類型是文本的時候$content.html(options.content);break;case "id": //當類型是容器ID的時候$content.html($("#" + options.content + "").html());break;case "iframe": //當類型是Iframe的時候$content.html("<iframe src=/"" + options.content + "/" width=/"100%/" height=/"" + (parseInt(options.height) - 70) + "px" + "/" scrolling=/"auto/" frameborder=/"0/" marginheight=/"0/" marginwidth=/"0/"></iframe>");break;default: //默認情況下的時候$content.html(options.content);break;}$blank.show();$blank.animate({ opacity: "0.5" }, "normal");$dialog.css({ display: "block", left: (($(document).width()) / 2 - (parseInt(options.width) / 2)) + "px", top: ($(document).scrollTop() - parseInt(options.height)) + "px", width: options.width, height: options.height });$dialog.animate({ top: options.scrollTop + "px" }, "normal");if (options.isClose) {stc = setTimeout(function () {$close.trigger("click");clearTimeout(stc);}, options.timeOut);}});if (options.isAuto) {st = setTimeout(function () {$this.trigger(options.Event);clearTimeout(st);}, options.time);}}}); 配套的css：
*{padding: 0;margin: 0;}#floatBoxBg{display: none;width: 100%;height: 100%;background: #000;position: fixed !important; /*ie7 ff*/position: absolute;top: 0;left: 0;filter: alpha(opacity=0);opacity: 0;}.floatBox{border: #9CC95F 5px solid;position: fixed !important; /*ie7 ff*/position: absolute;top: 50px;left: 40%;background: #fff;display: none;}.floatBox .title{height: 23px;padding: 7px 10px 0;color: #fff;background-attachment: scroll;background: #9CC95F;background-repeat: repeat-x;background-position: 0px 0px;}.floatBox .title h4{float: left;padding: 0;margin: 0;font-size: 14px;line-height: 16px;}.floatBox .title span{float: right;cursor: pointer;}.floatBox .content{padding: 20px 15px;background: #fff;overflow-x: hidden;overflow-y: auto;}#closeDialog{font-size: 20px;font-weight: bold;color: #000;margin-top: -5px;}#closeDialog:hover{font-size: 20px;font-weight: bold;color: #fff;margin-top: -5px;}最終的html示例：
<!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><title></title><script type="text/javascript" src="../js/jquery-1.7.min.js"></script><script type="text/javascript" src="jquery.popdialog.js"></script><link type="text/css" rel="stylesheet" href="popdialog.css" /></head><body><div id="test">彈出層插件測試</div><div id="detail" style="display: none;">歡迎各位網友使用彈出層插件demo</div><script type="text/javascript">$(function () {$("#test").PopDialog({Event: "click", //觸發響應事件title: "彈出層插件", //彈出層的標題type: "id", //彈出層類型(text、容器ID、URL、Iframe)content: "detail", //彈出層的內容獲取(text文本、容器ID名稱、URL地址、Iframe的地址)width: 500, //彈出層的寬度height: 300, //彈出層的高度 scrollTop: 200, //層滑動的高度也就是彈出層時離頂部滑動的距離isAuto: true, //是否自動彈出time: 2000, //設置彈出層時間，前提是isAuto=trueisClose: false, //是否自動關閉 timeOut: 5000 //設置自動關閉時間，前提是isClose=true });});</script></body></html>以上所述是小編給大家介紹的jQuery 彈出層插件(推薦)的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
