总结一些一个基于jQuery的弹出层插件。支持多窗口,拖动,最大化最小化,固定定位,相对于某个位置定位,具有简化的Tips模式。可以自定义外观等等,具体的看参数和演示
参数说明:
演示:
弹出一个纯文本的层arrow
弹出一张图片并固定定位arrow
点击测试
弹出一个SWF动画arrow
点击测试
加载一个url路径并显示遮罩背景arrow
$("#btn_show_url").click(function() {
Util.Dialog({
title : "加载文件",
content : "url:get?test.html",
showbg: true
});
return false;
});
点击测试
在框架里登录淘宝arrow
点击测试
弹出层定位演示arrow
左上角 右上角 左下角 右下角 顶居中 底居中 左居中 右居中 自定义
无标题,3秒后关闭arrow
无标题
提示层模式arrow
在按钮左边 在按钮右边 在按钮上边 在按钮下边
对话框模式arrow
对话框模式
对于回调函数的使用arrow
点我吧
动画效果arrow
下面有你想要的源码 可以下载
祝你好运
参数说明:
名称 说明
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;
});
下面有你想要的源码 可以下载
祝你好运