artDialog是一個基於javascript編寫的對話方塊元件，它擁有精緻的介面與友好的介面
l  自適應內容
artDialog的特殊UI框架能夠適應內容變化，甚至連外部程式動態插入的內容它仍然能自適應，因此你不必去考慮訊息內容尺寸使用它。它的訊息容器甚至能夠根據寬度讓文字居中或居左對齊——這一切全是XHTML+CSS原生實現。

l  完善的介面
它的介面完善，可以輕易與外部程式配合使用。如非同步寫入訊息、控制位置、尺寸、顯示與隱藏、關閉等。

l  細緻的體驗
如果不是在輸入狀態，它支援Esc快捷鍵關閉；可指定在元素附近彈出，讓操作更便捷；智慧給按鈕新增焦點；黃金比例垂直居中；超大響應區域特別為ipad等觸屏裝置優化；預先快取面板圖片更快響應……

l  跨平臺相容

相容：IE6+、Firefox、Chrome、Safari、Opera以及iPad等移動裝置。並且IE6下也能支援現代瀏覽器的靜止定位(fixed)、、alpha通道png背景。
下載地址：

 
快速入門
一、使用傳統的引數
art.dialog(content, ok, cancel)
示例：
art.dialog('簡單愉悅的介面，強大的表現力，優雅的內部實現', function(){alert('yes');});
art.dialog(“簡單愉悅的介面，強大的表現力，優雅的內部實現”);

二、使用字面量傳參
art.dialog(options)
示例
    var dialog = art.dialog({
    title: '歡迎',
    content: '歡迎使用artDialog對話方塊元件！',
    icon: 'succeed',
    follow: document.getElementById('btn2'),
    ok: function(){
        this.title('警告').content('請注意artDialog兩秒後將關閉！').lock().time(2);
        return false;
    }
});

三、擴充套件方法
需要對彈出後的對話方塊操作？artDialog簡單實用的擴充套件方法可以使這一切變得簡單。
如在ajax非同步操作中，我們可以先定義一個變數引用對話方塊返回的擴充套件方法：

var myDialog = art.dialog();// 初始化一個帶有loading圖示的空對話方塊
jQuery.ajax({
    url: 'http://web5.qq.com/content?id=1',
    success: function (data) {
        myDialog.content(data);// 填充對話方塊內容
    }
});

如果需要使用程式控制關閉，可以使用"close"方法關閉對話方塊：
myDialog.close();


外掛：框架應用工具
artDialog針對CMS類的框架應用提供了專屬外掛，如穿越框架、iframe、AJAX、跨框架傳值操作等。
例： 使用open方法嵌入頁面，並使用data方法在各個iframe間傳遞資料：

var val = document.getElementById('demoInput04-3').value;
art.dialog.data('test', val);
art.dialog.data('homeDemoPath', './_doc/');
// 此時iframeA.html 頁面可以使用art.dialog.data('test') 獲取到資料，如：
// document.getElementById('aInput').value = art.dialog.data('test');
art.dialog.open('./_doc/iframeA.html');

jQuery + artDialog
artDialog提供了一個jQuery版本，功能與標準版一致，呼叫只需要把art字首改成jQuery的名稱空間。
// 普通呼叫
$.dialog({content:'hello world!'});
// 使用選擇器方式，此時自動使用綁定了live click事件，同時啟用follow模式
$('#main .test').dialog({content: 'hello world'});
(最低相容jquery1.3.2，但框架應用外掛需要jquery1.4+執行[?])

配置引數

名稱	型別	預設值	描述
內容
title	String	'訊息'	標題內容
String	'loading..'	訊息內容。 1、如果傳入的是HTMLElement型別，如果是隱藏元素會給其設定display:block以顯示該元素，其他屬性與繫結的事件都會完整保留，對話方塊關閉後此元素又將恢復原來的display屬性，並且重新插入原文件所在位置 2、如果沒有設定content的值則會有loading的動畫
HTMLElement
按鈕
ok	Function	null	確定按鈕回撥函式。 函式如果返回false將阻止對話方塊關閉；函式this指標指向內部api；如果傳入true表示只顯示有關閉功能的按鈕
Boolean
Function	null	取消按鈕回撥函式。 函式如果返回false將阻止對話方塊關閉；函式this指標指向內部api；如果傳入true表示只顯示有關閉功能的按鈕 對話方塊標題欄的關閉按鈕其實就是取消按鈕，只不過視覺不同罷了，點選同樣觸發cancel事件
Boolean
okVal	String	'確定'	"確定按鈕"文字
String	'取消'	"取消按鈕"文字
Array	null	自定義按鈕。 配置引數成員： name —— 按鈕名稱 callback —— 按下後執行的函式 focus —— 是否聚焦點 disabled —— 是否標記按鈕為不可用狀態（後續可使用擴充套件方法讓其恢復可用狀態）   示例： 引數如：[{name: '登入', callback: function () {}}, {name: '取消'}] 。注意點選按鈕預設會觸發按鈕關閉動作，需要阻止觸發關閉請讓回撥函式返回false
尺寸
width	Number	'auto'	設定訊息內容寬度，可以帶單位。一般不需要設定此，對話方塊框架會自己適應內容。 如果設定為百分值單位，將會以根據瀏覽器可視範圍作為基準，此時如果瀏覽器視窗大小被改變其也會進行相應的調整
String
Number	'auto'	設定訊息內容高度，可以帶單位。不建議設定此，而應該讓內容自己撐開高度。 如果設定為百分值單位，將會以根據瀏覽器可視範圍作為基準，此時如果瀏覽器視窗大小被改變其也會進行相應的調整
String
位置
fixed	Boolean	false	開啟靜止定位。靜止定位是css2.1的一個屬性，它靜止在瀏覽器某個地方不動，也不受滾動條拖動影響。（artDialog支援IE6 fixed）
HTMLElement	null	讓對話方塊依附在指定元素附近。 可傳入元素ID名稱，注意ID名稱需要以“#”號作為字首
String
left	Number	'50%'	相對於可視區域的X軸的座標。 可以使用'0%' ~ '100%'作為相對座標，如果瀏覽器視窗大小被改變其也會進行相應的調整
String
top	Number	'38.2%'	相對於可視區域的Y軸的座標。 可以使用'0%' ~ '100%'作為相對座標，如果瀏覽器視窗大小被改變其也會進行相應的調整
String
視覺
lock	Boolean	false	開啟鎖屏。 中斷使用者對話方塊之外的互動，用於顯示非常重要的操作/訊息，所以不建議頻繁使用它，它會讓操作變得繁瑣
String	'#000'	鎖屏遮罩顏色
Number	0.7	鎖屏遮罩透明度
icon	String	null	定義訊息圖示。可定義“skins/icons/”目錄下的圖示名作為引數名（不包含字尾名）
String	'20px 25px'	內容與邊界填充邊距(即css padding)
互動
time	Number	null	設定對話方塊顯示時間。以秒為單位
Boolean	true	是否允許使用者調節尺寸
drag	Boolean	true	是否允許使用者拖動位置
esc	Boolean	true	是否允許使用者按Esc鍵關閉對話方塊
高階
id	String	null	設定對話方塊唯一標識。用途： 1、防止重複彈出 2、定義id後可以使用art.dialog.list[youID]獲取擴充套件方法
Number
Number	1987	重置全域性zIndex初始值。 用來改變對話方塊疊加高度。比如有時候配合外部浮動層UI元件，但是它們可能預設zIndex沒有artDialog高，導致無法浮動到artDialog之上，這個時候你就可以給對話方塊指定一個較小的zIndex值。 請注意這是一個會影響到全域性的配置，後續出現的對話方塊疊加高度將重新按此累加。
init	Function	null	對話方塊彈出後執行的函式
close	Function	null	對話方塊關閉前執行的函式。函式如果返回false將阻止對話方塊關閉。 請注意這不是關閉按鈕的回撥函式，無論何種方式關閉對話方塊，close都將執行。
show	Boolean	true	是否顯示對話方塊

擴充套件方法

名稱	描述
close()	關閉對話方塊
show()	顯示對話方塊
hide()	隱藏對話方塊
title(value)	寫入標題。無引數則返回標題容器元素
content(value)	向訊息容器中寫入內容。引數支援字串、DOM物件，無引數則返回內容容器元素
button(arguments)	插入一個自定義按鈕。 配置引數成員： name —— 按鈕名稱 callback —— 按下後執行的函式 focus —— 是否聚焦點 disabled —— 是否標記按鈕為不可用狀態（後續可使用擴充套件方法讓其恢復可用狀態）   示例： button({     name: '登入',     focus: true,     callback: function () {} }, {     name: '取消' })
follow(element)	讓對話方塊吸附到指定元素附近
position(left, top)	重新定位對話方塊
size(width, height)	重新設定對話方塊大小
lock()	鎖屏
unlock()	解鎖
time(val)	定時關閉（單位秒）

配置引數演示
內容[content]
1. 傳入字串

art.dialog({
    content: '我支援HTML'
});

2. 傳入HTMLElement
備註：1、元素不是複製而是完整移動到對話方塊中，所以原有的事件與屬性都將會保留2、如果隱藏元素被傳入到對話方塊，會設定display:block屬性顯示該元素3、對話方塊關閉的時候元素將恢復到原來在頁面的位置，style display屬性也將恢復

art.dialog({
    content: document.getElementById('demoCode_content_DOM'),
    id: 'EF893L'
});

標題[title]

art.dialog({
    title: 'hello world!'
});

確定取消按鈕[ok & cancel]
備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉

art.dialog({
    content: '如果定義了回撥函式才會出現相應的按鈕',
    ok: function() {
        this.title('3秒後自動關閉').time(3);
        returnfalse;
    },
    cancelVal: '關閉',
    cancel: true//為true等價於function(){}
});

自定義按鈕[button]
備註：回撥函式this指向擴充套件介面，如果返回false將阻止對話方塊關閉；button引數對應的擴充套件方法名稱也是"button"

art.dialog({
    id: 'testID',
    content: 'hello world!',
    button: [
        {
            name: '同意',
            callback: function() {
                this.content('你同意了').time(2);
                returnfalse;
            },
            focus: true
        },
        {
            name: '不同意',
            callback: function() {
                alert('你不同意')
            }
        },
        {
            name: '無效按鈕',
            disabled: true
        },
        {
            name: '關閉我'
        }
    ]
});

定時關閉的訊息[time]

art.dialog({
    time: 2,
    content: '兩秒後關閉'
});

防止重複彈出[id]

art.dialog({
    id: 'testID2',
    content: '再次點選執行看看'
});
art.dialog({id: 'testID2'}).title('3秒後關閉').time(3);

定義訊息圖示[icon]
請檢視skin/icons目錄下的圖示

art.dialog({
    icon: 'succeed',
    content: '我可以定義訊息圖示哦'
});

內容與邊界填充邊距[padding]
有時候並不需要預設的內容填充邊距，如展示圖片與視訊

art.dialog({
    padding: 0,
    title: '照片',
    content: '<img src="./images/photo.jpg" _cke_saved_src="./images/photo.jpg" width="379" height="500" />',
    lock: true
});

鎖屏[lock & background & opacity] 

art.dialog({
    lock: true,
    background: '#600', // 背景色
    opacity: 0.87,     // 透明度
    content: '中斷使用者在對話方塊以外的互動，展示重要操作與訊息',
    icon: 'error',
    ok: function() {
        art.dialog({content: '再來一個鎖屏', lock: true});
        returnfalse;
    },
    cancel: true
});

跟隨元素[follw]
1、標準形式

art.dialog({
    follow: document.getElementById('followTestBtn'),
    content: '讓對話方塊跟著某個元素，一個元素同時只能出現一個對話方塊'
});

2、使用簡寫形式 （已經繫結onclick事件，注意此返回值不再是對話方塊擴充套件方法）

art('#demoCode_follow_a').dialog({
    content: '讓對話方塊跟著某個元素，一個元素同時只能出現一個對話方塊'
});

自定義座標[left & top]

art.dialog({
    left: 100,
    top: '60%',
    content: '我改變座標了'
});

建立一個右下角浮動的訊息視窗

art.dialog({
    id: 'msg',
    title: '公告',
    content: 'hello world!',
    width: 320,
    height: 240,
    left: '100%',
    top: '100%',
    fixed: true,
    drag: false,
    resize: false
})

設定大小[width & height]

art.dialog({
    width: '20em',
    height: 55,
    content: '尺寸可以帶單位'
});

建立一個全屏對話方塊

art.dialog({
    width: '100%',
    height: '100%',
    left: '0%',
    top: '0%',
    fixed: true,
    resize: false,
    drag: false
})

靜止定位[fixed]

art.dialog({
    fixed: true,
    content: '請拖動滾動條檢視'
});

不許拖拽[drag & resize] 

art.dialog({
    drag: false,
    resize: false,
    content: '禁止拖拽'
});

擴充套件方法演示
特別說明：擴充套件方法支援鏈式操作
獲取擴充套件方法一：直接引用返回
var dialog = art.dialog({
    title: '我是對話方塊',
    content: '我是初始化的內容'
});
     
dialog.content('對話方塊內容被擴充套件方法改變了').title('提示');
     
獲取擴充套件方法二：通過對話方塊ID
art.dialog({
    id: 'KDf435',
    title: '警告',
    content: '我是初始化的內容'
});
     
art.dialog.list['KDf435'].content('對話方塊內容被擴充套件方法改變了');
     
獲取擴充套件方法三：回撥函式中this
art.dialog({
    title: '警告',
    content: '我是初始化的內容',
    ok: function () {
        this.content('你點了確定按鈕').lock();
        return false;
    },
    init: function () {
        this.content('對話方塊內容被擴充套件方法改變了');
    }
});
     
關閉頁面所有對話方塊
var list = art.dialog.list;
for (var i in list) {
    list[i].close();
};

按鈕介面演示
備註：回撥函式如果返回false將阻止對話方塊關閉
var dialog = art.dialog({
    title: '警告',
    content: '點選管理按鈕將讓刪除按鈕可用',
    width: '20em',
    button: [{
        name: '管理',
        callback: function () {
            this
            .content('我更改了刪除按鈕')
            .button({
                name: '刪除',
                disabled: false
            })
            .lock();
            return false;
        },
        focus: true
    }]
});
 
dialog.button(
    {
        name: '刪除',
        callback: function () {
            alert('delect')
        },
        disabled: true
    }
)

標題倒計時
var timer;
art.dialog({
    content: '時間越來越少，越來越少..',
    init: function () {
        var that = this, i = 5;
        var fn = function () {
            that.title(i + '秒後關閉');
            !i && that.close();
            i --;
        };
        timer = setInterval(fn, 1000);
        fn();
    },
    close: function () {
        clearInterval(timer);
    }
}).show();
關閉不刪除內容
art.dialog({
    id: 'show-hide',
    content: '關閉後阻止對話方塊被刪除，只隱藏對話方塊',
    close: function () {
        this.hide();
        return false;
    }
}).show();
AJAX高階應用：執行HTML片段中特殊script標籤
HTML片段中的<script type="text/dialog"></script>標籤包裹的javascript將會在artDialog內部執行，其this指向對話方塊擴充套件方法，這樣可以進一步實現訊息內容模組化。
(本例子使用了AJAX，需要在伺服器上執行。可開啟 ./ajaxContent/login.html 檢視原始碼中的自定義指令碼)
var dialog = art.dialog({id: 'N3690',title: false});
 
// jQuery ajax  
$.ajax({
    url: './ajaxContent/login.html',
    success: function (data) {
        dialog.content(data);
    },
    cache: false
});
應用到你的專案
在頁面head引入artDialog，其中skin引數表示對話方塊使用的風格檔案(如果專案採用jQuery作為框架，則引用jQuery artDialog版本)。
<script src="artDialog/artDialog.js?skin=default" _cke_saved_src="artDialog/artDialog.js?skin=default"></script>
如果需要在iframe應用下提供 更好的支援 ，可載入外掛：
<script src="artDialog/plugins/iframeTools.js" _cke_saved_src="artDialog/plugins/iframeTools.js"></script>
配置全域性預設引數(可選):
(function (config) {
    config['lock'] = true;
    config['fixed'] = true;
    config['okVal'] = 'Ok';
    config['cancelVal'] = 'Cancel';
    // [more..]
})(art.dialog.defaults);