我的对话框使用手册

我的对话框插件的使用方法

功能说明：对话框插件基于弹窗插件，引入my_alert.js后会在window上绑定一个MyPopup构造函数的oMyAlert实例。该实例有五个方法show、close、chagneMsg、addClass、removeClass。对话框的显隐是使用的添加删除节点的方式，每一次的显示都是一个新的节点，在就节点没有被删除的情况下在调用show方法也不会创建另一个节点。

只传文本，最简单的显示方式
```
var oOneShow = document.getElementById('oneShow');
oOneShow.onclick = function () {
  oMyAlert.show('我是谁？');
}
```
说明：这一种最简单的显示方式，即不设置按钮，会在1.5秒之后自动关闭对话框。

配置参数、方法


var oTwoShow = document.getElementById('twoShow');
oTwoShow.onclick = function () {
  var iNum = 0;
  oMyAlert.show('我是谁？', {
    bgclose: false,      // 是否可以点击背景关闭对话框（默认false不能）
    bgcolor: '#999'      // 背景颜色（默认transparent）
    opacity: 0.2,        // 背景透明度(默认0)
    msgAlign: 'c',       // 消息文本的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
    btnAlign: 'c',       // 按钮的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
    aBtnTxt: ['确定', '取消', '关闭'],    // 按钮的个数及其文本（默认无按钮）
    btn1: function () {  // btn1对应第一个按钮，btn+n对应第n个按钮的点击事件，如果不设置对应的事件，默认为调用close()关闭弹窗
      if ( iNum == 0 ) {
        oMyAlert.changeMsg('我是确定按钮，再点我就要消失了！');
        iNum = 1;
      } else {
        oMyAlert.close();
      }
    },
    btn2: function () {
      iNum = 0;
      oMyAlert.changeMsg('我是取消按钮，你点我呀！');
    },
    showFn: function () {
      oMyAlert.addClass('state1');
    }
  });
}

配置参数
msg	必须。show方法的第一个参数，是将要显示的对话框的文本
bgclose	可选。true，false。是否可以点击背景关闭对话框（默认false不能）
bgcolor	可选。背景颜色（默认transparent）
opacity	可选。背景透明度(默认0)
msgAlign	可选。消息文本的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
btnAlign	可选。按钮的对齐方式：l -> 左对齐；c -> 居中对齐（默认）；r -> 右对齐
aBtnTxt	可选。按钮的个数及其文本（默认无按钮）
btn+n	可选。这个是按钮的方法，btn1就是aBtnTxt中第一个按钮的点击方法。如aBtnTxt中的按钮没有对应的btn方法，将默认为点击关闭对话框。
showFn	可选。在弹窗显示之前执行的函数，注意是一个同步函数哈。

方法
show	最重要的方法，调用该方法会添加并显示对话框
close	关闭对话框
changeMsg	调用该方法，将改变对话框中的文本
addClass	调用该方法将给弹窗的popup-content添加类名
removeClass	调用该方法将给弹窗的popup-content删除类名

可以根据自己的需求改变默认的弹窗样式，或者是设置多种样式然后在显示的时候决定用那种样式。

// my_alert.css文件第一行，这是对话框默认样式
.my-alert .popup-content {
  padding: 0;
  background: #424F63;
  color: #fff;
  font-size: 14px;
}

// my_alert.css，要自定义弹窗样式可以在my_alert.css文件最下面这样写
.my-alert .state1 {
  background: #71B69A;
  border: 1px solid #3E7D6C;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  color: #fff;
}
.my-alert .state2 {
  background: #EDEECF;
  border: 2px solid #EDEECF;
  border-radius: 4px;
  box-shadow: 0 0 10px #aaa;
  color: #7B2025;
}

<button id="threeShow1">默认样式</button>
<button id="threeShow2">样式一</button>
<button id="threeShow3">样式二</button>

********************************************************

var oThreeShow1 = document.getElementById('threeShow1');
var oThreeShow2 = document.getElementById('threeShow2');
var oThreeShow3 = document.getElementById('threeShow3');

oThreeShow1.onclick = function () {
  oMyAlert.show('我是默认样式，我有按钮', {
    bgcolor: '#999',
    opacity: 0.2,
    aBtnTxt: ['确定']
  })
}

oThreeShow2.onclick = function () {
  oMyAlert.show('我是样式一，我没有按钮，我会在1.5秒后消失', {
    bgcolor: '#ccc',
    opacity: 0.4,
    showFn: function () {
      oMyAlert.addClass('state1');
    }
  })
}

var i;
var arr = ['改变1', '改变2']
oThreeShow3.onclick = function () {
  i = 0;
  oMyAlert.show('我是样式二，我有按钮，点击关闭我才会消失', {
    bgcolor: 'green',
    opacity: 0.2,
    aBtnTxt: ['改变文本', '样式一', '关闭'],
    btn1: function () {
      oMyAlert.changeMsg(arr[i++]);
      i = i >= arr.length ? 0 : i;
    },
    btn2: function () {
      oMyAlert.removeClass('state2');
      oMyAlert.addClass('state1');
    },
    showFn: function () {
      oMyAlert.addClass('state2');
    }
  })
}

我的对话框插件的使用方法

只传文本，最简单的显示方式

配置参数、方法

可以根据自己的需求改变默认的弹窗样式，或者是设置多种样式然后在显示的时候决定用那种样式。