jquery 自定义弹窗插件

采用类级别的方式：

$.extend({
    showDialog (params) {
      return Dialog.show(params);
    }
})

插件的定义：

因考虑同时至多一个弹窗，故export在创建了该弹窗对象之后。插件接受的参数包括标题、弹窗内容、关闭弹窗文本、回调操作文本及回调函数。show方法中将外界传入的参数加载到模板界面，然后将弹窗append到body下，并将关闭和回调方法分别绑定到对应按钮的click事件。

class Dialog {
  constructor ({title, content, close, next = "", fn} = {}) {
    this.$el = null
    this.data = {
      title,
      content,
      close,
      next,
      fn
    }
  }

  show (params) {
    this.data = params;
    let html = template(this.data);
    this.$el = $(html);
    $('.dialog-main-content', this.$el).html(this.data.content);
    $('body').append(this.$el)
    $('.close', this.$el).click(() => this.destroyed())
    $('.next', this.$el).click(() => {
      this.data.fn();
      this.destroyed();
    })
  }

  destroyed () {
    if (!this.$el) return
    this.$el.remove()
  }
}


export default new Dialog ()

调用：

let params = {
    "title": "修改成功！",
    "content": html,
    "next": "知道了",
    fn: function() {
        /*
        * 下一步操作
        */			
    }
}
$.showDialog(params);