總結一些一個基於jQuery的彈出層外掛。支援多視窗，拖動，最大化最小化，固定定位，相對於某個位置定位，具有簡化的Tips模式。可以自定義外觀等等，具體的看引數和演示
引數說明：

名稱	說明
type	彈出層型別，可選[dialog|tips]（預設為“dialog”）
theme	彈出層風格[default]
title	視窗標題文字
boxID	彈出層ID，預設為一串隨機生成的字串（Util.random(10)）
referID	相對於這個ID的位置進行定位
content	彈出層內容	text	文字內容，可以包含html標籤
img	圖片
swf	flash動畫
url	url連結
iframe	框架
width	視窗寬度(預設寬度為120px)
height	視窗高度(預設高度為50px)
time	自動關閉等待時間;(單位ms)
drag	是否啟用拖動( 預設為啟用)
lock	是否限制拖動範圍
fixed	是否開啟固定定位
showbg	是否顯示遮罩層( 預設為false)
showtitle	是否顯示彈出層標題( 預設為顯示)
showborder	是否顯示透明邊框( 預設不顯示)
position	設定彈出層位置,預設居中;
arrow	箭頭方向	top
right
bottom
left
tips	提示層設定	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;
});

下面有你想要的原始碼 可以下載

祝你好運