easydialog 是一款非常简洁的弹出层 JS 组件，相比于传统的 alert (), 有更好的用户体验。使用时只需要调用其已经定义好的方法即可，也可以自定义方法，并通过修改 CSS 文件，来改变不同的显示样式。

1、下载并解压easydialog，得到css和js文件，保存至/easydialog。

2、在使用页面中引入cs和js文件：

<link type="text/css" rel="stylesheet" href="/easydialog/easydialog.css"/>
<script type="text/javascript" src="/easydialog/easydialog.min.js"></script>

3、用法举例：

（1）使用默认模板

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没有两个按钮也不显示。

yesFn：确定按钮的回调函数，回调函数返回false将不关闭弹出层。

noFn：取消按钮的回调函数，回调函数返回false将不关闭弹出层，取消按钮的回调函数也同样会绑定在关闭按钮上，如果参数不是函数而是true，那么取消按钮就只有关闭弹出层的功能。

如果没有给按钮传回调函数，按钮将不显示。

（2）定时关闭

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

默认模板如果只有content有内容，将不显示header和footer部分，将显示最简模式。

autoClose：自动关闭窗口，单位为毫秒(ms)。

（3）自定义弹出图层

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

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

自定义弹出层时，需要先将HTML结构添加到页面中，然后设置其隐藏(display:none)，传参必须为id。

fixed：该参数为false时，弹出窗口为绝对定位(不跟随页面的滚动而滚动)，为true时，弹出窗口为固定定位(跟随页面的滚动而滚动)。

（4）遮罩层

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

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

（5）跟随定位

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

follow：被跟随元素，参数可以是元素的id，也可以是DOM对象。

followX：相对于被跟随元素的X轴偏移。

followY：相对于被跟随元素的X轴偏移。

（6）关闭拖拽

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

drag：该参数为false时将关闭拖拽的功能。

如果是自定义弹出层，要实现拖拽需要满足2个条件，首先要确保drag为true，然后需要一个id为“easyDialogTitle”的DOM元素。

（7）关闭弹出层

easyDialog.close();

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