大家好，今天顺亿来给大家分享一个超实用的弹出层插件——artDialog。相信大家在上网的时候都见过各种炫酷的弹出层，不仅视觉效果好，用户体验也是杠杠的！artDialog就是这样一个基于js编写的国产优秀插件，不仅能实现各种炫酷效果，而且兼容性超强，不依赖jQuery库就能用！
首先，我们来看看artDialog的一些基本效果：
artDialog的下载地址是：http://code.google.com/p/artdialog/downloads/list，目前已经更新到5.0版本了。开发者博客也很值得一看：www.planeart.cn。
artDialog界面友好，兼容性极强，功能也非常强大。接下来，我们就来看看如何应用这款插件吧！
使用artDialog的基本步骤
- 首先，引入样式和脚本文件：
<link href='./artDialog/skins/chrome.css' rel='stylesheet' />
<script src='./artDialog/artDialog.min.js'></script>- 然后进行调用：
使用参数调用
art.dialog(content, [ok], [cancel])例如：
art.dialog('这是php点点通的教程', function () {alert('你点击确定了')},function(){alert('你点击取消了');});使用字面量进行传值
art.dialog(Object)例如：
<html> <head> <title> jquery </title> <meta charset='utf-8' /> <link href='./artDialog/skins/chrome.css' rel='stylesheet' /> <script src='./artDialog/artDialog.min.js'></script> <script>function test(){ art.dialog({ width:300, height:100, id: 'shake-demo', title: '用户注册', content: '帐号：
' + '密码：', lock: true, fixed: true, ok: function () { var pw = document.getElementById('login-pw'); pw.select(); pw.focus(); return false; }, okValue: '提交', cancelValue:'取消', cancel: function () { alert('取消注册'); } });} </script> </head> <body> <input type='button' value='注册' onclick='test()'> </body></html>artDialog参数说明：
- 内容设置：title是弹出层的标题，content是弹出层的内容。
- 按钮设置：ok,cancel 回调函数 this 指向 art.dialog 对象，执行完毕默认关闭对话框。
- 尺寸设置：width和height分别设置对话框的宽度和高度。
- 位置设置：fixed固定定位，不受滚动条的影响。
- 视觉设置：lock是否锁屏遮罩。
- 其他高级设置：id设定对话框唯一标识。
artDialog还提供了丰富的接口，比如获取art.dialog对象、关闭对话框、显示和隐藏对话框等，这里就不一一列举了。
小结与拓展
好了，今天关于artDialog的介绍就到这里。artDialog是一个非常强大的弹出层插件，相信大家通过这篇文章已经对其有了基本的了解。如果你对artDialog还有其他疑问，或者想学习更多前端技术，欢迎访问趣航编程网，顺亿在这里等你哦！