jQuery 弹窗

总结一些一个基于jQuery的弹出层插件。支持多窗口，拖动，最大化最小化，固定定位，相对于某个位置定位，具有简化的Tips模式。可以自定义外观等等，具体的看参数和演示
参数说明：

名称说明type弹出层类型，可选[dialog|tips]（默认为“dialog”）theme弹出层风格[default]title窗口标题文字boxID弹出层ID，默认为一串随机生成的字符串（Util.random(10)）referID相对于这个ID的位置进行定位content弹出层内容text文本内容，可以包含html标签img图片swfflash动画urlurl链接iframe框架width窗口宽度(默认宽度为120px)height窗口高度(默认高度为50px)time自动关闭等待时间;(单位ms)drag是否启用拖动( 默认为启用)lock是否限制拖动范围fixed是否开启固定定位showbg是否显示遮罩层( 默认为false)showtitle是否显示弹出层标题( 默认为显示)showborder是否显示透明边框( 默认不显示)position设定弹出层位置,默认居中;arrow箭头方向toprightbottomlefttips提示层设置val箭头偏移量style提示层风格radius提示层圆角大小auto提示层位置自适应yesBtn确定按扭{text: "文字", fn: function(){}}noBtn取消按扭{text: "文字", fn: function(){}}ofns弹出窗打开后执行的函数;cfns弹出窗关闭后执行的函数;

演示：

弹出一个纯文本的层arrow

$("#btn_show_text").click(function() {Util.Dialog({title : "纯文本内容",content : "text:文字"});return false;});

弹出一张图片并固定定位arrow

$("#btn_show_img").click(function() {Util.Dialog({boxID: "wordpressImg",title : "wordpress 桌面壁纸",fixed : true,content : "img:http://leotheme.cn/wp-content/uploads/2008/09/tr2xcp6yw4o5xebj9s.jpg"});return false;});

点击测试
弹出一个SWF动画arrow

$("#btn_show_flash").click(function() {Util.Dialog({boxID: "swfDialog",title : "动画",width : 230,height : 100,content : "swf:http://p.xinyour.com/images-01/bk_230x100.swf"});return false;});

点击测试
加载一个url路径并显示遮罩背景arrow

$("#btn_show_url").click(function() {
Util.Dialog({
title : "加载文件",
content : "url:get?test.html",
showbg: true
});
return false;
});
点击测试
在框架里登录淘宝arrow

$("#btn_show_iframe").click(function() {Util.Dialog({title : "登录淘宝",content : "iframe:https://login.taobao.com"});return false;});

点击测试
弹出层定位演示arrow

$("#btn_show_position").click(function() {Util.Dialog({title : "位置演示",width: 200,height: 150,fixed: true,content : "text:位置演示",position: {left: "",top: ""}});return false;});

左上角  右上角  左下角  右下角  顶居中 底居中  左居中  右居中  自定义
无标题，3秒后关闭arrow

$("#btn_show_ntitle").click(function() {Util.Dialog({title : "无标题，3秒后关闭",boxID : "notitle",fixed : true,content : "text:无标题，3秒后关闭",showtitle : "remove",time: 3000,border : {opacity:"0"},bordercolor : "#666"});return false;});

无标题
提示层模式arrow

$("#btn_show_tips").click(function() {Util.Dialog({type: "tips",boxID: "Tip_tips",referID: "btn_show_tips",width: 150,border: { opacity: "0", radius: "3"},closestyle: "orange",arrow: "left",fixed: true,arrowset: {val: "10px"},content: "text:点击这里下载源码！",position: {left: "0px",top: "0px",lin: true,tin: false}});return false;});

在按钮左边  在按钮右边  在按钮上边  在按钮下边
对话框模式arrow

$("#btn_show_dialog").click(function() {Util.Dialog({boxID: "XYdialog",title: "对话框",width: 250,height: 100,fixed: true,content: "text:你是码农么？",yesBtn: ["是", function(){var msg = $("#XYdialog").find(".ui_content");msg.html("你骗人！");return false;}],noBtn: ["不是",function(){return true;}],cfns: function(){if (confirm("你真的要关闭对话框么!")) return true;else return false;}});return false;});

对话框模式
对于回调函数的使用arrow

$("#btn_read_value").click(function() {var v = $("#callback-value").val();if (v=="好吧，我也愿意！"){$("#callback-value").val("你愿意取我吗？")};Util.Dialog({boxID: "dialog-callback-value",title: "这里将显示页面上输入框里的值",width: 250,height: 100,fixed: true,content: "text:",ofns: function(){var msg = $("#dialog-callback-value").find(".ui_content");msg.html(""+$("#callback-value").val()+"");},yesBtn: ["愿意", function(){var msg = $("#callback-value");msg.val("好吧，我也愿意！");Util.Dialog({type: "tips",boxID: "Tip_callback_value",referID: "callback-value",width: 150,height: 25,border: { opacity: "0", radius: "3"},closestyle: "orange",arrow: "bottom",fixed: false,arrowset: {val: "10px"},time: 2000,content: "text:我的值已经改变了哦！",position: {left: "0",bottom: "0",lin: true,bin: false}});}]});return false;});

点我吧
动画效果arrow

$("#btn_show_login").click(function() {Util.Dialog({boxID: "dialog-login",fixed: true,showtitle: "remove",content: "iframe:demo/login.html",position: {top: "-350"},ofns: function(){$("#dialog-login").animate({top: '+50px'}, 300);}});return false;});

下面有你想要的源码 可以下载

祝你好运