js弹出层插件artDialog使用手册

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

依赖环境

支持Chrome 、Firefox、Edge、IE6及以上浏览器
artDialog 4.1.7
不依赖jQuery

引用文件

<script src="https://www.itxst.com/js/jquery.js"></script>
<script src="https://www.itxst.com/package/artDialog/artDialog.js"></script>
<link href="https://www.itxst.com/package/artDialog/skins/default.css" rel="stylesheet" />
<!--如果修改弹出窗用iframe框架显示另外一个网页-->
<!--<script src="https://www.itxst.com/package/artDialog/plugins/iframeTools.js"></script>-->

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