10、jQuery插件之artDialog弹窗插件

╰+攻爆jí腚メ 2022-06-15 06:51 157阅读 0赞

**                                             文档索引**

*  ### [快速上手][Link 1] ###
 *  ### [配置参数][Link 2] ###
 *   *  
     *  #### 内容 ####
     *   *  [title][]
         *  [content][]
     *  #### 按钮 ####
     *   *  [ok][]
         *  [cancel][]
         *  [okValue][]
         *  [cancelValue][]
         *  [button][]
     *  #### 尺寸 ####
     *   *  [width][]
         *  [height][]
     *  #### 位置 ####
     *   *  [fixed][]
         *  [follow][]
     *  #### 视觉 ####
     *   *  [lock][]
         *  [padding][]
     *  #### 高级 ####
     *   *  [id][]
         *  [zIndex][]
         *  [initialize][]
         *  [beforeunload][]
         *  [visible][]
         *  [time][]
 *  ### [接口][Link 3] ###
 *   *  
     *  [art.dialog.get(id)][art.dialog.get_id]
     *  [closed][]
     *  [close()][close]
     *  [visible()][visible 1]
     *  [hidden()][hidden]
     *  [title(value)][title_value]
     *  [content(value)][content_value]
     *  [button(button, button, ..)][button_button_ button_ ..]
     *  [follow(element)][follow_element]
     *  [size(width, height)][size_width_ height]
     *  [lock()][lock 1]
     *  [unlock()][unlock]
     *  [time(value)][time_value]
 *  ### [插件][Link 4] ###

## 快速上手 ##

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

### 引入文件 ###

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

如果使用jquery，引用jquery.artDialog.min.js即可，调用时请把 'art' 前缀替换成 '$'。

### 调用方式 ###

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

1.  **art.dialog**(*content*, *\[ok\]*, *\[cancel\]*)
    
        art.dialog('artDialog: I Love You!', function () { alert('Thank you!')});
    
    [运行][Link 5]
2.  **art.dialog**(*options*)
    
        art.dialog({ 
            title: '欢迎',
            content: '欢迎使用artDialog对话框组件！',
            ok: function () { 
                this
                .title('警告')
                .content('请注意artDialog两秒后将关闭！')
                .lock()
                .time(2000);
                return false;
            }});
    
    [运行][Link 6]

### 扩展接口 ###

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

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

## 配置参数 ##

*  ### title ###
    
    概述
    
    (默认值: "message") 标题内容
    
    类型
    
    String
    
    示例
    
        art.dialog({ 
            title: 'hello world!'});
    
    [运行][Link 7]
 *  ### content ###
    
    概述
    
    (默认值: "<div class="d-loading"><span>loading..</span></div>") 设置消息内容。  
      
    如果传入的是 HTMLElement 类型，如果是隐藏元素会给其设置display:block以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的display属性，并且重新插入原文档所在位置
    
    类型
    
    String, HTMLElement
    
    示例
    
        art.dialog({ 
            content: 'hello world!'});
    
    [运行][Link 8]
    
        art.dialog({ 
            content: document.getElementById('options-content-demo-element'),
            id: 'EF893L'});
    
    [运行][Link 9]
 *  ### ok ###
    
    概述
    
    确定按钮。  
      
    回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
    
    类型
    
    Function
    
    示例
    
        art.dialog({ 
            ok: function () { 
                this.content('hello world!');
                return false;
            }});
    
    [运行][Link 10]
 *  ### cancel ###
    
    概述
    
    取消按钮。  
      
    取消按钮也等同于标题栏的关闭按钮。回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
    
    类型
    
    Function
    
    示例
    
        art.dialog({ 
            cancel: function () { 
                alert('关闭');
            }});
    
    [运行][Link 11]
 *  ### okValue ###
    
    概述
    
    (默认值: "ok") 确定按钮文本
    
    类型
    
    String
    
    示例
    
        art.dialog({ 
            okValue: '猛击我',
            ok: function () { 
                this.content('hello world!');
                return false;
            }});
    
    [运行][Link 12]
 *  ### cancelValue ###
    
    概述
    
    (默认值: cancel) 取消按钮文本
    
    类型
    
    String
    
    示例
    
        art.dialog({ 
            cancelValue: '取消我',
            cancel: function () { 
                alert('关闭');
            }});
    
    [运行][Link 13]
 *  ### 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: '关闭我'
                }
            ]});
    
    [运行][Link 14]
 *  ### width ###
    
    概述
    
    (默认值: "auto") 设置对话框 **内容** 宽度。  
      
    一般情况下无需设置此值，对话框会自适应内容宽度
    
    类型
    
    Number, String
    
    示例
    
        art.dialog({ 
            width: 460});
    
    [运行][Link 15]
    
        art.dialog({ 
            width: '20em'});
    
    [运行][Link 16]
 *  ### height ###
    
    概述
    
    (默认值: "auto") 设置对话框 **内容** 高度。  
      
    一般情况下无需设置此值，对话框会自适应内容宽度
    
    类型
    
    Number, String
    
    示例
    
        art.dialog({ 
            height: 460});
    
    [运行][Link 17]
    
        art.dialog({ 
            height: '20em'});
    
    [运行][Link 18]
 *  ### fixed ###
    
    概述
    
    (默认值: false) 开启固定定位。  
      
    固定定位是 css2.1 position 的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与 部分移动浏览器对其支持不好，内部会转成绝对定位
    
    类型
    
    Boolean
    
    示例
    
        art.dialog({ 
            fixed: true,
            content: '请拖动滚动条查看'});
    
    [运行][Link 19]
 *  ### follow ###
    
    概述
    
    让对话框依附在指定元素附近
    
    类型
    
    HTMLElement
    
    示例
    
        art.dialog({ 
            follow: document.getElementById('options-follow-demo-runCode'),
            content: '让对话框跟着某个元素，一个元素同时只能出现一个对话框'});
    
    [运行][Link 20]
 *  ### lock ###
    
    概述
    
    (默认值: false) 开启锁屏遮罩。  
      
    中断用户对话框之外的交互，用于显示非常重要的操作/消息。建议只在适合的时候使用它。遮罩的颜色与透明度可在皮肤CSS中设置。
    
    类型
    
    Boolean
    
    示例
    
        art.dialog({ 
            lock: true});
    
    [运行][Link 21]
 *  ### padding ###
    
    概述
    
    (默认值: "20px 25px") 设置消息内容与消息容器的填充边距，即 style padding 属性
    
    类型
    
    String
    
    示例
    
        art.dialog({ 
            content: 'hello world',
            padding: 0})
    
    [运行][Link 22]
 *  ### id ###
    
    概述
    
    设定对话框唯一标识。  
      
    作用：
    
    1.  可防止重复 ID 对话框弹出
    2.  可后续使用 [art.dialog.**get**(id)][art.dialog.get_id] 获取某个对话框的接口
    
    类型
    
    String
    
    示例
    
        art.dialog({ 
            id: 'id-demo',
            content: '再次点击运行看看'});
        art.dialog.get('id-demo').title('8888888888');
    
    [运行][Link 23]
 *  ### zIndex ###
    
    概述
    
    (默认值: 1987) 重置全局 zIndex 初始值，用来改变对话框叠加高度。  
      
    比如有时候配合外部浮动层UI组件，但是它们可能默认 zIndex 没有 artDialog 高，导致无法浮动到 artDialog 之上，这个时候你就可以给对话框指定一个较小的 zIndex 值。 请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。
    
    类型
    
    Number
    
    示例
    
        art.dialog({ 
            zIndex: 87});
    
    [运行][Link 24]
 *  ### initialize ###
    
    概述
    
    对话框初始化完成后执行的函数。  
      
    回调函数 this 指向 art.dialog 对象
    
    类型
    
    Function
    
    示例
    
        art.dialog({ 
            initialize: function () { 
                this.content('对话框初始化完成');
            }});
    
    [运行][Link 25]
 *  ### beforeunload ###
    
    概述
    
    对话框关闭前执行的函数。  
      
    回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭
    
    类型
    
    Function
    
    示例
    
        art.dialog({ 
            beforeunload: function () { 
                return confirm('确定关闭对话框吗');
            }});
    
    [运行][Link 26]
 *  ### visible ###
    
    概述
    
    (默认值: true) 是否显示对话框
    
    类型
    
    Boolean
    
    示例
    
        var dialog = art.dialog({ 
            visible: false,
            id: 'visible-demo'});
        
        confirm('显示对话框吗') ? dialog.visible() : dialog.hidden();
    
    [运行][Link 27]
 *  ### time ###
    
    概述
    
    设置对话框显示时间，超过时间自动关闭 (单位：毫秒)
    
    类型
    
    Number
    
    示例
    
        art.dialog({ 
            time: 2000});
    
    [运行][Link 28]

## 接口 ##

*  ### 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!');
    
    [运行][Link 29]
 *  ### closed ###
    
    概述
    
    对话框是否已经关闭。**注意**：这是一个属性，对话框若关闭其值为 true
    
    示例
    
        var dialog = art.dialog();
        
        dialog.close();
        
        alert(dialog.closed);
    
    [运行][Link 30]
 *  ### close() ###
    
    概述
    
    关闭对话框
    
    示例
    
        var dialog = art.dialog({ 
            content: 'hello world!'});
        
        if (confirm('关闭对话框吗')) { 
            dialog.close();};
    
    [运行][Link 31]
 *  ### visible() ###
    
    概述
    
    把隐藏的对话框显示
    
    示例
    
        var dialog = art.dialog({ 
            visible: false});
        
        dialog.visible();
    
    [运行][Link 32]
 *  ### hidden() ###
    
    概述
    
    隐藏对话框
    
    示例
    
        var dialog = art.dialog();
        
        dialog.hidden();
    
    [运行][Link 33]
 *  ### title(value) ###
    
    概述
    
    设置对话框标题
    
    参数
    
    value
    
    标题内容
    
    示例
    
        var dialog = art.dialog({ 
            title: '请等待..'});
        
        dialog.title('欢迎使用');
    
    [运行][Link 34]
 *  ### content(value) ###
    
    概述
    
    设置消息内容
    
    参数
    
    value
    
    消息内容
    
    示例
    
        var dialog = art.dialog();
        
        dialog.content('加载完成！');
    
    [运行][Link 35]
 *  ### 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);
    
    [运行][Link 36]
 *  ### follow(element) ###
    
    概述
    
    让对话框依附在指定元素附近
    
    参数
    
    element
    
    元素
    
    示例
    
        var dialog = art.dialog();
        
        dialog.follow(document.getElementById('api-follow-demo-runCode'));
    
    [运行][Link 37]
 *  ### size(width, height) ###
    
    概述
    
    指定对话框内容尺寸
    
    参数
    
    width
    
    内容宽度
    
    height
    
    内容高度
    
    示例
    
        var dialog = art.dialog();
        
        dialog.size('20em', 60);
    
    [运行][Link 38]
 *  ### lock() ###
    
    概述
    
    开启锁屏遮罩
    
    示例
    
        var dialog = art.dialog();
        
        dialog.lock();
    
    [运行][Link 39]
 *  ### unlock() ###
    
    概述
    
    关闭锁屏遮罩
    
    示例
    
        var dialog = art.dialog({ 
            lock: true});
        
        dialog.unlock();
    
    [运行][Link 40]
 *  ### time(value) ###
    
    概述
    
    设置对话框显示时间，超过时间自动关闭 (单位：毫秒)
    
    参数
    
    value
    
    毫秒
    
    示例
    
        var dialog = art.dialog();
        
        dialog.time(2000);
    
    [运行][Link 41]

## 插件 ##

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

### 演示插件 ###

*  ### art.alert(content, \[callback\]) ###
    
        art.alert('那些年，我们一起追的女孩');
    
    [运行][Link 42]
 *  ### art.confirm(content, ok, \[cancel\]) ###
    
        art.confirm('你再也不相信爱情了么？', function () { 
            alert(0);}, function () { 
            alert(1);});
    
    [运行][Link 43]
 *  ### art.prompt(content, ok, \[defaultValue\]) ###
    
        art.prompt('你的名字是什么？', function (value) { 
            alert(value);}, '糖饼');
    
    [运行][Link 44]
 *  ### shake() ###
    
        art.dialog({ 
            id: 'shake-demo',
            title: '登录',
            content: '帐号：<input id="login-na" type="text" value="guest" />'
                + '<br />密码：<input id="login-pw" type="text" value="****" />',
            initialize: function () { 
                document.getElementById('login-na').focus();
            },
            lock: true,
            fixed: true,
            ok: function () { 
                var pw = document.getElementById('login-pw');
                pw.select();
              pw.focus();
              this.shake();
                return false;
            },
            okValue: '登录',
            cancel: function () {}});
    
    [运行][Link 45]

1、  art.dialog(content, \[ok\], \[cancel\])例子

<!DOCTYPE html>

<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <title>artDialog插件</title>  
        <link rel="stylesheet" href="default.css" />  
        <script src="artDialog.js"></script>  
        <script src="manuals/jquery-1.7.2.min.js"></script>  
    </head>  
    <body>  
        <script>  
            art.dialog('弹窗内容: 天在下雨，我在想你',  
                function () \{  
                    alert('中秋节快乐!')  
                \}  
            );  
        </script>  
    </body>

</html>

![Center][]

点击‘OK’后，![Center 1][]

2、  art.dialog(options)例子

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <title>artDialog插件</title>  
        <link rel="stylesheet" href="default.css" />  
        <script src="artDialog.js"></script>  
        <script src="artDialog.plugins.min.js"></script>  
        <script src="manuals/jquery-1.7.2.min.js"></script>  
    </head>  
    <body>  
        <script>  
            art.dialog(\{  
                title: '欢迎',  
                content: '欢迎使用artDialog对话框组件！',  
                ok: function () \{  
                     
                \},  
                okValue: '确认',  
                cancel: function () \{  
                 
                \},  
                cancelValue: '取消'  
            \});  
        </script>  
    </body>

</html>

![Center 2][]

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <title>artDialog插件</title>  
        <link rel="stylesheet" href="default.css" />  
        <script src="artDialog.js"></script>  
        <script src="manuals/jquery-1.7.2.min.js"></script>  
    </head>  
    <body>  
        <script>  
            art.dialog(\{  
            title: '欢迎',  
            content: '欢迎使用artDialog对话框组件！',  
            ok: function () \{  
                this.title('警告').content('请注意artDialog两秒后将关闭！').lock().time(2000);  
                return false;  
            \}  
        \});  
        </script>  
    </body>

</html>

![Center 3][]

![Center 4][]

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

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

art.alert(content, \[callback\])

</html>

![Center 5][]

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

<!DOCTYPE html>

</html>

![Center 6][]

点击‘ok’，

![Center 7][]

点击‘cancel’，

![Center 8][]

shake()

<!DOCTYPE html>

<html lang="en">  
    <head>  
        <meta charset="utf-8">  
        <title>artDialog插件</title>  
        <link rel="stylesheet" href="default.css" />  
        <script src="artDialog.js"></script>  
        <script src="artDialog.plugins.min.js"></script>  
        <script src="manuals/jquery-1.7.2.min.js"></script>  
    </head>  
    <body>  
        <script>  
            art.dialog(\{  
                id: 'shake-demo',  
                title: '登录',  
                content: '帐号：<input id="login-na" type="text" value="guest" />'  
                    + '<br />密码：<input id="login-pw" type="text" value="\*\*\*\*" />',  
                initialize: function () \{  
                    document.getElementById('login-na').focus();  
                \},  
                lock: true,  
                fixed: true,  
                ok: function () \{  
                    var pw = document.getElementById('login-pw');  
                    pw.select();  
                  pw.focus();  
                  this.shake();  
                    return false;  
                \},  
                okValue: '登录',  
                cancel: function () \{\}  
            \});  
        </script>  
    </body>

</html>

![Center 9][]

参考:http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/

[Link 1]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#lead
[Link 2]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options
[title]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-title
[content]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-content
[ok]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-ok
[cancel]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-cancel
[okValue]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-okValue
[cancelValue]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-cancelValue
[button]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-button
[width]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-width
[height]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-height
[fixed]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-fixed
[follow]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-follow
[lock]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-lock
[padding]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-padding
[id]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-id
[zIndex]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-zIndex
[initialize]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-initialize
[beforeunload]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-beforeunload
[visible]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-visible
[time]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-time
[Link 3]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api
[art.dialog.get_id]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-get
[closed]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-closed
[close]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-close
[visible 1]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-visible
[hidden]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-hidden
[title_value]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-title
[content_value]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-content
[button_button_ button_ ..]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-button
[follow_element]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-follow
[size_width_ height]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-size
[lock 1]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-lock
[unlock]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-unlock
[time_value]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-time
[Link 4]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#plugins
[Link 5]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#lead-demo-1
[Link 6]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#lead-demo-2
[Link 7]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-title-demo
[Link 8]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-content-demo-string
[Link 9]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-content-demo-element
[Link 10]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-ok-demo
[Link 11]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-cancel-demo
[Link 12]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-okValue-demo
[Link 13]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-cancelValue-demo
[Link 14]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-button-demo
[Link 15]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-width-demo
[Link 16]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-width-demo-string
[Link 17]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-height-demo
[Link 18]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-height-demo-string
[Link 19]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-fixed-demo
[Link 20]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-follow-demo
[Link 21]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-lock-demo
[Link 22]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-padding-demo
[Link 23]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-id-demo
[Link 24]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-zIndex-demo
[Link 25]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-initialize-demo
[Link 26]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-beforeunload-demo
[Link 27]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-visible-demo
[Link 28]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#options-time-demo
[Link 29]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-get-demo
[Link 30]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-closed-demo
[Link 31]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-close-demo
[Link 32]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-visible-demo
[Link 33]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-hidden-demo
[Link 34]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-title-demo
[Link 35]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-content-demo
[Link 36]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-button-demo
[Link 37]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-follow-demo
[Link 38]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-size-demo
[Link 39]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-lock-demo
[Link 40]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-unlock-demo
[Link 41]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#api-time-demo
[Link 42]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#plugins-alert-demo
[Link 43]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#plugins-confirm-demo
[Link 44]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#plugins-prompt-demo
[Link 45]: http://img0.zz91.com/huanbao/mblog/artDialog-5.0.4/#plugins-shake-demo
[Center]: /images/20220615/c67fc0b18c9c435693d2f585eaefb06d.png
[Center 1]: /images/20220615/d3fb146ae25843518875746c9f87b88d.png
[Center 2]: /images/20220615/d8a9343b983e44cfb8da0fdd8a36f042.png
[Center 3]: /images/20220615/5247f640ef3a444d85e5d1626f34885d.png
[Center 4]: /images/20220615/8f0ac78e79694023bf5495cafc35e018.png
[Center 5]: /images/20220615/13e22245844a43c09c13438faa42a4f8.png
[Center 6]: /images/20220615/7c748803defd445da6a0e0491b1721d3.png
[Center 7]: /images/20220615/e8ed7c32fdc343e58f42d93e403f0a63.png
[Center 8]: /images/20220615/a05403179fad4d9181fff1baef4a39a7.png
[Center 9]: /images/20220615/ea9e4b5f52d64fe2a1a3c5c0a9a117a2.png