在做网页前端设计的时候经常会要用到对话框，有的框架自带对话框功能，有的则自己写对话框代码，这里我们介绍一款轻量级对话框插件artdialog的基本使用方法。这个对话框是基于JS编写并且需要Jquery的支持才能运行，而且这个插件非常小简单压缩后只有10多KB的样子所以非常便捷。!


一般运行环境配置
首先要导入的是JQuery.js文件，这里我建议使用1.11.0以上版本，然后导入art5Dialog.js这个文件。把这些文件放到head标签之间，具体代码如下：

<script type="text/javascript" src="../scripts/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../scripts/artdialog/dialog-plus-min.js"></script> 

artdialog常见配置参数
title: {对话框上显示的标题.默认:'提示'}
content: {消息体内容,可以加入自己的HTML}
lock: {是否锁定屏幕. 默认:false}
height: {高度,支持px像素等单位. 默认:'auto'}
width: {宽度,支持px像素等单位. 默认:'auto'}
url: {iframe地址,存在content参数时候,此参数无效}
y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中，而是使用的黄金比例)}
x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
fixed: {是否启用静止定位. 默认:false}
time: {自动关闭的时间，单位是秒}
style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
yesText: {确定按钮文本. 默认:'确定'}
noText: {取消按钮文本. 默认:'取消'}
id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2'，则内容容器id为'my2Content'}
yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}


常见的操作
首先在网页的head标签中对插件进行配置，常见配置代码如下；
 (function(){//定义一个JS函数，在里面设置对话框全局变量  
    var d = art.dialog.defaults;  //声明一个变量d用来存放配置
    //可以根据你自己的要求加载不同的皮肤，在数组第一个为默认皮肤，可以不用填写
    d.skin = ['default', 'chrome', 'facebook', 'aero'];  
    d.drag = true;  //是否支持支持对话框拖动
      
    // 超过此面积大小的对话框使用替身拖动  
    d.showTemp = 100000;  
})();


其次在下面以一个简单的网页弹出框范例讲解下，把HTML网页上需要的必要资源文件导入后。在JAVASCRIPT标签中编辑如下代码。

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