最近在做一个项目，对之前所用的弹出框速度不是很满意，但是一直没找到个满意的（其实ymPrompt和lhgdialog都不错），后来在Blueidea的论坛里看到了artDialog，试用了下，感觉还不错，于是用到项目上。

名称：artDialog
作者：唐斌
版本：v 2.0.9 Betav 2.10 Preview
更新：2010-05-02 2010-05-18
License：GNU Lesser General Public License

简介：artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。

功能：支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤、穿越框架..

优点：

• 自适应内容: 无需预设高宽, 对话框与按钮自适应消息内容的大小
• 文本智能对齐: 如果设置了对话框宽度，短文本居中长文本居左对齐
• 容错能力: 如果定义的宽度高度小于内容大小不会出现错位
• 界面机制: 九宫格布局, 样式钩子与结构丰富, 可定制自适应皮肤
• 跨浏览器支持: 支持 Firefox, Chrome, Safari, IE6+, Opera ..
• 轻巧: 不依赖第三方库, js压缩后不足10kb
• IE6无抖动静止定位: 在 IE6 下可实现与现代浏览器一样完美无闪动静止定位效果
• 智能定位: 使用自定义坐标的时候智能修正位置, 不会超出边界
• 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
• IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件

下载：Google Code

使用感受：
好吧，上面的介绍跟优点都是从DEMO页面抄下来。

还是说说我自己的使用感受吧。首先调用使用的是流行的传入JSON参数的方法，这个我喜欢：

1
2
3
4
5
6
7
8
9
10
11
12
13

artDialog(
        {	
            content:'欢迎你来到对话框世界！',
            lock:true,
            style:'succeed noClose'
        },
        function(){
            alert('你点了确定');
        },
        function(){
            alert('你点了取消');
        }
);

另外在页面载入的时候，会预先弹出一个隐藏的对话框，预先加载了一些皮肤图片，这样可以加快以后弹出框的弹出速度，很聪明的做法。

代码结构清晰，而且扩展起来很方便。

不过虽然优点这么多，但是在实际使用中还是会发现不少问题，下面是我遇到的部分问题：

• IE7的一个iframe bug。artDialog使用的是createElement的方法来创建节点，这跟ymPrompt和lhgdialog不同。而使用createElement方法创建的iframe在IE7下会出现边框，虽然artDialog里面设了iframe的border为0，但是这在IE7下是不会有作用的，解决方法是创建了iframe后用setAttribute('frameborder', '0', 0)，注意需要第三个参数"0"，不然IE7还是不认。2.1中已经修复这个问题。
• artDialog还有个重要的特性是对象重用，之前创建的对象会用一个box装起来，并用id作标识，如果是相同的id，则会用回之前的对象，加快了弹出框的创建速度，但是这在FF之类的浏览器下工作得很好，可是在IE下，这样却会在DOM下产生许多副本，详细情况用IE DOM inspector看看就知道了。在IE下关闭一个弹出框后再打开另外一个，你会发现框了的内容会首先出现之前那个弹出框的内容再出现实际的内容。我的解决方法是……去掉对象重用的相关代码。
• artDialog有个不错的功能：锁定。但是事实上在我这里并没用到，锁定会把屏幕锁住，弹出框不能移动，背景用遮罩盖住，突显弹出框。其实我只是想要个普通的遮罩来突显弹出框而已，不需要锁定，而且锁定时会把滚动条干掉，导致页面会整体移动，个人感觉不太好。不过扩展个overlay功能其实不难。2.1版已经改进了锁定功能，不会发生页面的偏移了。
• 弹出框的定位使用的是黄金比例垂直居中，我不知道这个的好处是什么，实际上的效果并不是很好。水平居中没问题，但是垂直居中有时会太靠顶，所以最后我还是改为普通的垂直居中了。2.1中也作了改进。
• 使用iframe作为弹出内容的话，artDialog会首先出现一个loading的动画，等iframe加载完才显示。这很好，但是如果你的iframe里使用了jQuery的$(document).ready()的话，那恭喜你中大奖了。ready了的代码可能会出现异常，特别是在IE下。onload的速度一般会比jQuery的ready要慢，会是这个原因引起的吗？未作深入研究，所以我直接把这个loading干掉了。

大致上我遇到比较重大的问题就是上面这几个了，希望下一个版本能让我喜出望外。

Update 2010.05.20 版本2.1修复了不少bug也改进了不少功能，作者还真勤劳～跟作者在微博上反应了些问题都在新版本中得到了解决，赞一个。期待最终版。