jQuery 弹出层插件(推荐)

前端之家收集整理的这篇文章主要介绍了jQuery 弹出层插件(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大。在这里个人写了一个比较秀珍的弹出层插件

jquery.popdialog.js

标题 type: "text",//弹出层类型(text、容器ID、URL、Iframe) content: "content",//弹出层的内容(text文本、容器ID名称URL地址、Iframe的地址) width: 500,//弹出层的宽度 height: 400,//弹出层的高度 scrollTop: 200,//层滑动的高度也就是弹出层时离顶部滑动的距离 isAuto: false,//是否自动弹出 time: 2000,//设置自动弹出层时间,前提是isAuto=true isClose: false,//是否自动关闭 timeOut: 2000 //设置自动关闭时间,前提是isClose=true }; var options = $.extend(defaults,options); $("body").prepend("

X
"); 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" },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("