# easyDialog v2.0

## 演示与说明

by : Stylechen.com

### 使用默认的HTML模板

    var btnFn = function(){
      alert( e.target );
      return false;
    };

    easyDialog.open({
      container : {
        header : '弹出层标题',
        content : '欢迎使用easyDialog : )',
        yesFn : btnFn,
        noFn : true
      }
    });

默认的HTML模板分成3个部分
header：包含弹出层的标题和关闭按钮
conent：包含弹出层的内容
footer：包含确定和取消按钮

如果header没有内容将不显示，content必须要有内容，footer没有2个按钮也不显示。
yesFn：确定按钮的回调函数，回调函数返回false将不关闭弹出层。
noFn：取消按钮的回调函数，回调函数返回false将不关闭弹出层，取消按钮的回调函数也同样会绑定在关闭按钮上，如果参数不是函数而是true，那么取消按钮就只有关闭弹出层的功能。
如果没有给按钮传回调函数，按钮将不显示。

运行

### 默认模板只有content

    easyDialog.open({
      container : {
        content : '弹出层将在2秒后关闭...'
      },
      autoClose : 2000
    });

默认模板如果只有content有内容，将不显示header和footer部分，将显示最简模式。
autoClose：自动关闭窗口，单位为毫秒(ms)。

运行

### 自定义弹出层

    <div id="imgBox" style="display:none">
      <img src="test_img.jpg" alt="" />
    </div>

    easyDialog.open({
      container : 'imgBox',
      autoClose : 2000,
      fixed : false
    });

自定义弹出层时，需要先将HTML结构添加到页面中，然后设置其隐藏(display:none)，传参必须为id。
fixed：该参数为false时，弹出窗口为绝对定位(不跟随页面的滚动而滚动)，为true时，弹出窗口为固定定位(跟随页面的滚动而滚动)。

运行

### 遮罩层

    easyDialog.open({
      container : {
        header : '没有遮罩层',
        content : '欢迎使用easyDialog : )'
      },
      overlay : false
    });

overlay：该参数为false时，将不显示遮罩层，没有遮罩层的情况下可以方便对页面继续进行操作。

运行

### 跟随定位

    easyDialog.open({
      container : {
        header : '跟随定位',
        content : '弹出窗口可以跟随某元素绝对定位'
      },
      follow : 'demoBtn5',
      followX : -137,
      followY : 24
    });

follow：被跟随元素，参数可以是元素的id，也可以是DOM对象。
followX：相对于被跟随元素的X轴偏移。
followY：相对于被跟随元素的X轴偏移。

运行

### 关闭拖拽

    easyDialog.open({
      container : {
        header : '关闭拖拽',
        content : '欢迎使用easyDialog : )'
      }
      drag : false
    });

drag：该参数为false时将关闭拖拽的功能。
如果是自定义弹出层，要实现拖拽需要满足2个条件，首先要确保drag为true，然后需要一个id为“easyDialogTitle”的DOM元素。

运行

### 关闭弹出层

    easyDialog.close();

调用easyDialog.close()方法可以关闭当前的弹出层，另外使用ESC键也可以关闭弹出层，如果不想使用ESC键来关闭弹出层设置lock为true即可。

如果是自定义弹出层，也想使用关闭按钮来关闭弹出层，除了给该按钮手动绑定一个关闭弹出层的方法外，还可以添加一个id为“closeBtn”的DOM元素，这样不绑定事件就也可以关闭弹出层。

### 回调函数

    var callFn = function(){
      alert( 'hello' );
    };

    easyDialog.open({
      container : {
        header : '回调函数',
        content : '欢迎使用easyDialog : )'
      },
      callback : callFn
    });

callback：设置弹出层关闭后执行的回调函数。

运行

### 参数列表

参数 | 参数类型 | 默认参数 | 参数说明
--- | --- | --- | ---
container | String / Object | null | 弹出窗口内容 参数为DOM元素的id，那么弹出层内容将是自定义的，如果是object将自动创建一个默认的弹出层内容模板。 内容模板的参数： header：弹出层的标题，并包含了关闭按钮，如果没有参数将不显示。 content：弹出层的内容，参数可以是字符串，也可以是HTML代码。 yesFn：确定按钮的回调函数，回调函数返回false将不关闭弹出层，回调函数的this指向easyDialog，无参数将不显示按钮。 noFn：取消按钮的回调函数，回调函数返回false将不关闭弹出层，回调函数的this指向easyDialog，该回调函数也同样会绑定在关闭按钮上，如果参数不是函数而是true，那么取消按钮仅有关闭弹出层的功能，无参数将不显示按钮。 yesText：确定按钮的文本，默认为“确定”。 noText：取消按钮的文本，默认为“取消”。
drag | Boolean | true | 拖拽效果 true：启用拖拽效果。 false：禁用拖拽效果。 自定义弹出层，要实现拖拽需要满足2个条件，首先要确保drag参数为true，然后需要一个id为“easyDialogTitle”的DOM元素。
fixed | Boolean | true | 设置定位 true：固定定位，弹出窗口跟随页面滚动而滚动。 false：绝对定位，弹出窗口不跟随页面的滚动。
overlay | Boolean | true | 设置遮罩层 true：显示遮罩层，不可对页面其他元素进行操作。 false：不显示遮罩层，可以对页面其他元素进行操作。
follow | String / Object | null | 跟随定位 设置弹出窗口跟随某元素进行绝对定位，跟随定位时将不显示遮罩层，参数可以是元素id也可以是DOM对象。
followX | Number | 0 | 设置跟随定位时，相对于被跟随元素的X轴偏移，单位为px，传参时无需带单位。
followY | Number | 0 | 设置跟随定位时，相对于被跟随元素的Y轴偏移，单位为px，传参时无需带单位。
lock | Boolean | false | 锁定弹出层 true：ESC键不可以关闭弹出层。 false：ESC键可以关闭弹出层。
autoClose | Number | 0 | 设置弹出层自动关闭，单位为ms，传参时无需带单位。
callback | Function | null | 设置关闭弹出层后执行的回调函数，this指向easyDialog。

### 默认内容模板的样式和结构

如果要自定义默认模板的样式，可以修改下载文档中的easydialog.css文件，下面是相应的HTML源码部分：

    <div class="easyDialog_wrapper" id="easyDialogWrapper" >
      <div class="easyDialog_content">
        <h4 class="easyDialog_title" id="easyDialogTitle">
          <a href="javascript:void(0)" title="关闭窗口" class="close_btn" id="closeBtn">&times;</a>
          弹出层标题
        </h4>
        <div class="easyDialog_text">欢迎使用easyDialog : )</div>
        <div class="easyDialog_footer">
          <button class="btn_normal" id="easyDialogNoBtn">取消</button>
          <button class="btn_highlight" id="easyDialogYesBtn">确定</button>
        </div>
      </div>
    </div>

下载easyDialog：http://stylechen.com/wp-content/uploads/download/easydialog-v2.0.zip