artDialog

**注意：**内部依赖全局模块require('jquery')，请注意全局模块配置是否正确

快速参考

普通对话框

模态对话框

气泡浮层

添加按钮

控制对话框关闭

给对话框左下角添加复选框

点按钮不关闭对话框

不显示关闭按钮

创建 iframe 内容

artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面，可以在顶层页面创建一个可供 iframe 访问的对话框创建方法，例如：

方法

show([anchor])

示例

showModal([anchor])

示例

close([result])

注意：close()方法只隐藏对话框，不会在 DOM 中删除，删除请使用remove()方法。

remove()

注意：不同于close([result])方法，remove()方法会从 DOM 中移出对话框相关节点，销毁后的对话框无法再次使用。

对话框按钮点击后默认会依次触发 close()、remove() 方法。如果想手动控制对话框关闭可以如下操作：

content(html)

示例

title(text)

示例

width(value)

示例

height(value)

示例

reset()

button(args)

参数请参考选项button；同时支持传入 HTML 字符串填充按钮区域。

focus()

blur()

addEventListener(type, callback)

支持的事件有：show、close、beforeremove、remove、reset、focus、blur

removeEventListener(type, callback)

dialog.get(id)

dialog.getCurrent()

配置参数

content

类型

示例

title

类型

示例

statusbar

可以实现类似“不再提示”的复选框。注意：必须有按钮才会显示。

类型

示例

回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭。

类型

示例

okValue

类型

示例

cancel

取消按钮也等同于标题栏的关闭按钮，若值为false则不显示关闭按钮。回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭。

类型

示例

cancelValue

类型

示例

cancelDisplay

类型

示例

button

类型

选项

示例

width

类型

示例

height

类型

示例

skin

类型

示例

padding

名称	类型	描述
value	String	按钮显示文本
callback	Function	(可选) 回调函数`this`指向`dialog`对象，执行完毕默认关闭与销毁对话框（依次执行`close()`与`remove()`），若返回`false`则阻止关闭与销毁
autofocus	Boolean	(默认值:`false`) 是否自动聚焦
disabled	Boolean	(默认值: `false`) 是否禁用

(默认值: 继承 css 文件设置) 设置消息内容与消息容器的填充边距，即 style padding属性

类型

示例

fixed

固定定位是 css2.1 position的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位。

类型

示例

align

如果show(elem)与showModal(elem)传入元素，align参数方可生效，支持如下对齐方式：

类型

示例

autofocus

类型

quickClose

类型

示例

zIndex

(默认值: 1024) 重置全局zIndex初始值，用来改变对话框叠加高度。

比如有时候配合外部浮动层 UI 组件，但是它们可能默认zIndex没有对话框高，导致无法浮动到对话框之上，这个时候你就可以给对话框指定一个较小的zIndex值。

请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。

类型

示例

onshow

类型

示例

onclose

类型

示例

onbeforeremove

类型

onremove

类型

示例

onfocus

类型

onblur

类型

onreset

类型

示例

属性

open

returnValue

示例

文档索引

-
快速上手
-
-
配置参数
-
- -
  内容
  -
  - title
  - content
  -
- -
  按钮
  -
  - ok
  - cancel
  - okValue
  - cancelValue
  - button
  -
- -
  尺寸
  -
  - width
  - height
  -
- -
  位置
  -
  - fixed
  - follow
  -
- -
  视觉
  -
  - lock
  - padding
  -
- -
  高级
  -
  - id
  - zIndex
  - initialize
  - beforeunload
  - visible
  - time
  - esc
  - focus
  -
-
-
接口
-
- art.dialog.get(id)
- closed
- close()
- visible()
- hidden()
- title(value)
- content(value)
- button(button, button, ..)
- follow(element)
- size(width, height)
- lock()
- unlock()
- time(value)
-
-
插件
-

快速上手

artDialog api 风格统一，有一定前端开发经验的同学通过阅读文档5分钟即可上手。 - -

引入文件

在页面 head 引入 artDialog 样式与脚本文件:

<link href="./skins/default.css" rel="stylesheet" />
-<script src="./artDialog.min.js"></script>

调用方式

art.dialog(content, [ok], [cancel])

art.dialog('artDialog: I Love You!', function () {alert('Thank you!')});
-

- 运行

art.dialog(options)

art.dialog({
-    title: '欢迎',
-    content: '欢迎使用artDialog对话框组件！',
-    ok: function () {
-        this
-        .title('警告')
-        .content('请注意artDialog两秒后将关闭！')
-        .lock()
-        .time(2000);
-        return false;
-    }
-});
-

- 运行

artDialog 有两种调用方式，第一种是最简单的直接传入参数方式；第二种拥有更多的可选项，参见配置参数。

[使用jQuery?]

扩展接口

除了上述两种调用方式之外，artDialog 还提供一些接口方便异步操作，比如实现外部程序更新对话框内容、关闭窗口等。这是属于高级操作，详情参见接口。

若无特别说明，扩展方法均支持链式调用。

配置参数

-
title
-
-
概述
-
(默认值: "message") 标题内容
-
类型
-
String
-
示例
-
-
```
art.dialog({
-    title: 'hello world!'
-});
```
- 运行
-
-
-
content
-
-
概述
-
(默认值: "<div class="d-loading"><span>loading..</span></div>") 设置消息内容。
-
- 如果传入的是 HTMLElement 类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置
-
类型
-
String, HTMLElement
-
示例
-
-
```
art.dialog({
-    content: 'hello world!'
-});
```
- 运行
-
-
```
art.dialog({
-    content: document.getElementById('options-content-demo-element'),
-    id: 'EF893L'
-});
```
- 运行
-
-
-
ok
-
-
概述
-
确定按钮。
-
- 回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
-
类型
-
Function
-
示例
-
-
```
art.dialog({
-    ok: function () {
-        this.content('hello world!');
-        return false;
-    }
-});
```
- 运行
-
-
-
cancel
-
-
概述
-
取消按钮。
-
- 取消按钮也等同于标题栏的关闭按钮。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
-
类型
-
Function
-
示例
-
-
```
art.dialog({
-    cancel: function () {
-        alert('关闭');
-    }
-});
```
- 运行
-
-

okValue

概述

(默认值: "ok") 确定按钮文本

类型

String

示例

art.dialog({
-    okValue: '猛击我',
-    ok: function () {
-        this.content('hello world!');
-        return false;
-    }
-});

- 运行

cancelValue

概述

(默认值: cancel) 取消按钮文本

类型

String

示例

art.dialog({
-    cancelValue: '取消我',
-    cancel: function () {
-        alert('关闭');
-    }
-});

- 运行

button

概述

自定义按钮组。
-
- 回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭

类型

Array

选项

value: 按钮显示文本
callback: (可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
focus: (默认值: true) 是否聚焦
width: (可选) 设置按钮 CSS width 值
disabled: (默认值: false) 是否禁用
id: (默认值: 与 value 一致) 唯一标识

示例

art.dialog({
-    button: [
-        {
-            value: '同意',
-            callback: function () {
-                this
-                .content('你同意了')
-                .button({
-                    id: 'button-disabled',
-                    value: '我变成有效按钮了',
-                    disabled: false
-                 });
-                return false;
-            },
-            focus: true
-        },
-        {
-            value: '不同意',
-            callback: function () {
-                alert('你不同意')
-            }
-        },
-        {
-            id: 'button-disabled',
-            value: '无效按钮',
-            disabled: true
-        },
-        {
-            value: '关闭我'
-        }
-    ]
-});

- 运行

-
width
-
-
概述
-
(默认值: "auto") 设置对话框内容宽度。
-
- 一般情况下无需设置此值，对话框会自适应内容宽度
-
类型
-
Number, String
-
示例
-
-
```
art.dialog({
-    width: 460
-});
```
- 运行
-
-
```
art.dialog({
-    width: '20em'
-});
```
- 运行
-
-
-
height
-
-
概述
-
(默认值: "auto") 设置对话框内容高度。
-
- 一般情况下无需设置此值，对话框会自适应内容宽度
-
类型
-
Number, String
-
示例
-
-
```
art.dialog({
-    height: 460
-});
```
- 运行
-
-
```
art.dialog({
-    height: '20em'
-});
```
- 运行
-
-
-
fixed
-
-
概述
-
(默认值: false) 开启固定定位。
-
- 固定定位是 css2.1 position 的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位
-
类型
-
Boolean
-
示例
-
-
```
art.dialog({
-    fixed: true,
-    content: '请拖动滚动条查看'
-});
```
- 运行
-
-

follow

概述

让对话框依附在指定元素附近

类型

HTMLElement

示例

art.dialog({
-    follow: document.getElementById('options-follow-demo-runCode'),
-    content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'
-});

- 运行

-
lock
-
-
概述
-
(默认值: false) 开启锁屏遮罩。
-
- 中断用户对话框之外的交互，用于显示非常重要的操作/消息。建议只在适合的时候使用它。遮罩的颜色与透明度可在皮肤CSS中设置。
-
类型
-
Boolean
-
示例
-
-
```
art.dialog({
-    lock: true
-});
```
- 运行
-
-
-
padding
-
-
概述
-
(默认值: "20px 25px") 设置消息内容与消息容器的填充边距，即 style padding 属性
-
类型
-
String
-
示例
-
-
```
art.dialog({
-    content: 'hello world',
-    padding: 0
-})
```
- 运行
-
-
-
id
-
-
概述
-
设定对话框唯一标识。
-
- 作用： -
1. 可防止重复 ID 对话框弹出
2. 可后续使用 art.dialog.get(id) 获取某个对话框的接口
-
-
类型
-
String
-
示例
-
-
```
art.dialog({
-    id: 'id-demo',
-    content: '再次点击运行看看'
-});
-art.dialog.get('id-demo').title('8888888888');
```
- 运行
-
-
-
zIndex
-
-
概述
-
(默认值: 1987) 重置全局 zIndex 初始值，用来改变对话框叠加高度。
-
- 比如有时候配合外部浮动层UI组件，但是它们可能默认 zIndex 没有 artDialog 高，导致无法浮动到 artDialog 之上，这个时候你就可以给对话框指定一个较小的 zIndex 值。 - 请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
-
类型
-
Number
-
示例
-
-
```
art.dialog({
-    zIndex: 87
-});
```
- 运行
-
-
-
initialize
-
-
概述
-
对话框初始化完成后执行的函数。
-
- 回调函数 this 指向 art.dialog 对象
-
类型
-
Function
-
示例
-
-
```
art.dialog({
-    initialize: function () {
-        this.content('对话框初始化完成');
-    }
-});
```
- 运行
-
-
-
beforeunload
-
-
概述
-
对话框关闭前执行的函数。
-
- 回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
-
类型
-
Function
-
示例
-
-
```
art.dialog({
-    beforeunload: function () {
-        return confirm('确定关闭对话框吗');
-    }
-});
```
- 运行
-
-

visible

概述

(默认值: true) 是否显示对话框

类型

Boolean

示例

var dialog = art.dialog({
-    visible: false,
-    id: 'visible-demo'
-});
-
-confirm('显示对话框吗') ? dialog.visible() : dialog.hidden();

- 运行

-
time
-
-
概述
-
设置对话框显示时间，超过时间自动关闭 (单位：毫秒)
-
类型
-
Number
-
示例
-
-
```
art.dialog({
-    time: 2000
-});
```
- 运行
-
-
-
esc
-
-
概述
-
(默认值: false) 是否允许用户按 Esc 键关闭对话框
-
类型
-
Boolean
-
示例
-
-
```
art.dialog({
-    esc: false,
-    content: '按 Esc 不能关闭我'
-});
```
- 运行
-
-
-
focus
-
-
概述
-
(默认值: true) 是否支持对话框按钮自动聚焦
-
类型
-
Boolean
-
示例
-
-
```
art.dialog({
-    focus: false,
-    ok: function () {}
-});
```
- 运行
-
-

接口

-
art.dialog.get(id)
-
-
概述
-
根据 id 获取 art.dialog 对象。注意：这是一个静态方法
-
参数
-
-
-
id
-
对话框 id
-
-
-
返回值
-
如果存在 id 参数则返回 art.dialog 对象，否则返回页面所有 art.dialog 对象数组
-
示例
-
-
```
art.dialog({
-    id: 'demo-get'
-});
-
-var dialog = art.dialog.get('demo-get');
-dialog.title('hello').content('I Love You!');
-
```
- 运行
-
-
-
closed
-
-
概述
-
对话框是否已经关闭。注意：这是一个属性，对话框若关闭其值为 true
-
示例
-
-
```
var dialog = art.dialog();
-
-dialog.close();
-
-alert(dialog.closed);
-
```
- 运行
-
-

close()

概述

关闭对话框

示例

var dialog = art.dialog({
-    content: 'hello world!'
-});
-
-if (confirm('关闭对话框吗')) {
-    dialog.close();
-};
-

- 运行

visible()

概述

把隐藏的对话框显示

示例

var dialog = art.dialog({
-    visible: false
-});
-
-dialog.visible();

- 运行

-
hidden()
-
-
概述
-
隐藏对话框
-
示例
-
-
```
var dialog = art.dialog();
-
-dialog.hidden();
```
- 运行
-
-
-
title(value)
-
-
概述
-
设置对话框标题
-
参数
-
-
-
value
-
标题内容
-
-
-
示例
-
-
```
var dialog = art.dialog({
-    title: '请等待..'
-});
-
-dialog.title('欢迎使用');
```
- 运行
-
-
-
content(value)
-
-
概述
-
设置消息内容
-
参数
-
-
-
value
-
消息内容
-
-
-
示例
-
-
```
var dialog = art.dialog();
-
-dialog.content('加载完成！');
```
- 运行
-
-

button(button, [button], ..)

概述

添加或者修改一个或者多个按钮

参数

button: 按钮配置

选项

value: 按钮显示文本
callback: (可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
focus: (默认值: true) 是否聚焦
width: (可选) 设置按钮 CSS width 值
disabled: (默认值: false) 是否禁用
id: (默认值: 与 value 一致) 唯一标识

示例

修改按钮与新增按钮：

var dialog = art.dialog({
-    button: [{
-        value: '增加一个按钮',
-        focus: true,
-        callback: function () {
-            this.button({
-                value: '关闭我'
-            });
-            return false;
-        }
-    }, {
-        id: 'button',
-        value: '提交 (5)',
-        width: '8em',
-        callback: function () {
-            alert(0);
-            return false;
-        },
-        disabled: true
-    }]
-});
-
-var i = 5;
-var timer = setInterval(function () {
-    i--;
-    
-    dialog.button({
-        id: 'button',
-        value: '提交 (' + i + ')',
-        disabled: true
-    });
-    
-    if (i === 0) {
-        clearInterval(timer);
-        dialog.button({
-            id: 'button',
-            value: '提交',
-            disabled: false
-        });
-    };
-}, 1000);

- 运行

-
follow(element)
-
-
概述
-
让对话框依附在指定元素附近
-
参数
-
-
-
element
-
元素
-
-
-
示例
-
-
```
var dialog = art.dialog();
-
-dialog.follow(document.getElementById('api-follow-demo-runCode'));
```
- 运行
-
-
-
size(width, height)
-
-
概述
-
指定对话框内容尺寸
-
参数
-
-
-
width
-
内容宽度
-
height
-
内容高度
-
-
-
示例
-
-
```
var dialog = art.dialog();
-
-dialog.size('20em', 60);
```
- 运行
-
-
-
lock()
-
-
概述
-
开启锁屏遮罩
-
示例
-
-
```
var dialog = art.dialog();
-
-dialog.lock();
```
- 运行
-
-

unlock()

概述

关闭锁屏遮罩

示例

var dialog = art.dialog({
-    lock: true
-});
-
-dialog.unlock();

- 运行

-
time(value)
-
-
概述
-
设置对话框显示时间，超过时间自动关闭 (单位：毫秒)
-
参数
-
-
-
value
-
毫秒
-
-
-
示例
-
-
```
var dialog = art.dialog();
-
-dialog.time(2000);
```
- 运行
-
-

插件

artDialog 可以通过插件支持拖动、抖动效果， alert、confirm、prompt 方法。只需在 artDialog 之后引用如下文件即可：

-<script src="./artDialog.plugins.min.js"></script>

- -

演示插件

art.alert(content, [callback])

art.alert('那些年，我们一起追的女孩');
-

- 运行

art.confirm(content, ok, [cancel])

art.confirm('你再也不相信爱情了么？', function () {
-    alert(0);
-}, function () {
-    alert(1);
-});
-

- 运行

art.prompt(content, ok, [defaultValue])

art.prompt('你的名字是什么？', function (value) {
-    alert(value);
-}, '糖饼');
-

- 运行

shake()

art.dialog({
-    id: 'shake-demo',
-    title: '登录',
-    content: '帐号：<input type="text" value="guest" /><br />'
-        + '密码：<input id="login-pw" type="text" value="****" />',
-    lock: true,
-    fixed: true,
-    ok: function () {
-        var pw = document.getElementById('login-pw');
-        pw.select();
-    	pw.focus();
-    	this.shake();
-        return false;
-    },
-    okValue: '登录',
-    cancel: function () {}
-});

- 运行

artDialog 自从 2009 第一个版本发布到现在，期间进行了很多次重构，因为作者相信：只要用心，哪怕一个小玩意都可以做到极致。

若喜欢 artDialog，期待小额资金捐赠以支持开源事业 :-) https://me.alipay.com/planeart

artDialog

文档导航

引入 artDialog

1.直接引用

2.作为 Webpack、RequireJS 或 SeaJS 的模块引入

快速参考

普通对话框

模态对话框

气泡浮层

添加按钮

控制对话框关闭

给对话框左下角添加复选框

点按钮不关闭对话框

不显示关闭按钮

创建 iframe 内容

方法

show([anchor])

示例

showModal([anchor])

示例

close([result])

remove()

content(html)

示例

title(text)

示例

width(value)

示例

height(value)

示例

reset()

button(args)

focus()

blur()

addEventListener(type, callback)

removeEventListener(type, callback)

dialog.get(id)

dialog.getCurrent()

配置参数

content

类型

示例

title

类型

示例

statusbar

类型

示例

ok

类型

示例

okValue

类型

示例

cancel

类型

示例

cancelValue

类型

示例

cancelDisplay

类型

示例

button

类型

选项

示例

width

类型

示例

height

类型

示例

skin

类型

示例

padding

类型

示例

fixed