js弹出层插件artDialog使用手册
artDialog是一款功能强大又非常漂亮的jquery弹窗插件，浏览器兼容性好支持IE6+, Firefox, chrome, Opera, Safari，本教程将介绍如何快速入门使用artDialog。
依赖环境支持Chrome 、Firefox、Edge、IE6及以上浏览器
artDialog 4.1.7不依赖jQuery
引用文件
下载artDialog插件点击下载文件
弹个简单的窗口试一试var dlg=art.dialog({
content: '弹出内容支持HTML'
});在线试一试
传入html元素比如传入ID为box的div元素
1,dox元素会被移到conten里面，所以你无需担心这个网页会出现两个ID为box的div,所以弹出层取值可以直接用原来的ID，如box的div里面有一个ID为txtUserName的输入框，取值可以直接 var userName=$("#txtUserName").val();
2,如果被传入的对象是隐藏的，将被显示出来，关闭对话框将恢复到原来的位置和属性。
art.dialog({
content: document.getElementById('box'),
id: 'itxst'
});在线试一试
设置标题art.dialog({
title: '自定义标题内容'
});确定与取消按钮//缺省的简单写法
art.dialog({
title:'标题',
content: '按要有回调函数才会显示',
ok: function () {
//点击关闭后你要执行的JS
// return false;//false不关闭窗口
return true;//立即关闭窗口
},
cancel: true
});
//自定义按钮名称的写法
art.dialog({
title:'标题',
content: '按要有回调函数才会显示',
okVal:'确定提交',
ok: function () {
//点击关闭后你要执行的JS
// return false;//false不关闭窗口
return true;//立即关闭窗口
},
cancelVal:'取消提交',
cancel: function(){
return true;//立即关闭窗口
}
});在线试一试
自定义按钮组artDialog允许传入数组来创建按钮，按钮对象属性包含{name:'按钮名称',callback:回调函数,focus:'是否焦点',disabled:'是否有效'}
art.dialog({
id: 'itxst',
content: '正文内容可以是html',
button: [
{
name: '审批',
callback: function () {
alert('你审核了流程');
return true;
},
focus: true
},
{
name: '驳回',
callback: function () {
alert('你驳回了流程');
return true;
}
},
{
name: '无效的按钮',
disabled: true
}
]
});自定义图标图标在skins/icons目录下
art.dialog({
icon: 'succeed', // succeed成功图标 error 错误图标 warning 警告图标 loading加载中图标 等等
content: '定义弹窗图标'
});显示阴影遮罩层
art.dialog({
lock: true,
background: '#000', // 背景颜色
opacity: 0.6, // 遮罩层透明度
content: '锁住网页屏幕',
icon: 'warning',
ok: function () {
return true;
},
cancel: true
});在线试一试
定时关闭 art.dialog({
time: 3,
content: '3秒后关闭'
});设置弹出窗ID art.dialog({
id: 'itxst',
content: '多次点击查看ID'
});自定义坐标 art.dialog({
left: 200,
top: '50%',
content: '自定义坐标'
});
//右下角消息窗口
art.dialog({
id: 'notice',
title: '通知',
content: '即刻就放假!',
width: 300, //设置窗口大小
height: 200,
left: '100%',
top: '100%',
fixed: true, //浮动窗口 不跟随滚动条移动
drag: true, //允许拖动
resize: false //不能改变大小
})