jQuery 弹窗

总结一些一个基于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;
});

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

祝你好运

猜你喜欢