摘要： artDialog是一款功能强大又非常漂亮的jquery弹窗插件，浏览器兼容性好支持IE6+, Firefox, chrome, Opera, Safari，本教程将介绍如何快速入...

artDialog是一款功能强大又非常漂亮的jquery弹窗插件，浏览器兼容性好支持IE6+, Firefox, chrome, Opera, Safari，本教程将介绍如何快速入门使用artDialog。

依赖环境

支持Chrome 、Firefox、Edge、IE6及以上浏览器

artDialog 4.1.7

不依赖jQuery

引用文件

<script src="http://www.jhchina.net/blog/js/jquery.js"></script>

<script src="http://www.jhchina.net/blog/package/artDialog/artDialog.js"></script>

<link href="http://www.jhchina.net/blog/package/artDialog/skins/default.css" rel="stylesheet" />

<!--如果修改弹出窗用iframe框架显示另外一个网页-->

<!--<script src="http://www.jhchina.net/blog/package/artDialog/plugins/iframeTools.js"></script>-->

弹个简单的窗口试一试

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 //不能改变大小
})

artDialog属性设置列表

代码示例

art.dialog({
                content: document.getElementById('box'),
                id: 'itxst',
                ok: function () { alert("你点击了确定按钮"); return true; },
                okVal: '确定',
                cancel: function () { alert("你点击了取消按钮"); return true; },
                cancelVal: '取消',
                button: [
                    {
                        name: '审批',
                        callback: function () {
                            alert('你审核了流程');
                            return true;
                        },
                        focus: true
                    },
                    {
                        name: '驳回',
                        callback: function () {
                            alert('你驳回了流程');
                            return true;
                        }
                    },
                    {
                        name: '无效的按钮',
                        disabled: true
                    }
                ],
                width: 300,
                height: 200,
                fixed: true,
                left: 100,
                top: 100,
                lock: true,
                background: '#000',
                opacity: 0.6,
                icon: 'error',
                padding: '5px 10px',
                time: 6,
                close: function () {
                    alert('窗口被关闭了')
                    return true;
                },
                init: function () {
                    alert('初始化完成')
                    return true;
                }
 });

artDialog方法列表

artDialog提供了关闭、显示、隐藏修改标题设置大小等方法，使用方法如下。

使用方法

//dialog对象
var dlg= art.dialog({
                content: '弹出内容支持HTML'
                  });
//修改标题
dlg.title("设置新标题");
//3秒后关闭窗口
 setTimeout(function(){dlg.close();},3000);

方法列表

button方法

//dialog对象
var dlg= art.dialog({content: '弹出内容支持HTML'});
//3秒后设置button
var btns=[
            {
                      name: '审批',
                        callback: function () {
                            alert('你审核了流程');
                            return true;
                        },
                        focus: true
                    },
                    {
                        name: '驳回',
                        callback: function () {
                            alert('你驳回了流程');
                            return true;
                        }
                    },
                    {
                        name: '无效的按钮',
                        disabled: true
                    }
                ];
 setTimeout(function(){
 dlg.button(btns);
 },3000);

follw弹窗跟在某个元素旁方法

//dialog对象
var dlg= art.dialog({content: '弹出内容支持HTML' });
//3秒后执行
 setTimeout(function(){
  dlg.follow(document.getElementById('btn'));
 },3000);