js封装弹框

一、配置项

为modal提供配置项：

• 标题title
• 是否展示关闭按钮showClose
• 弹框内容content
• 是否展示取消按钮showCancel
• 是否展示确认按钮showConfirm
• 取消按钮的文本cancelText
• 确认按钮的文本confirmText
• 弹框宽度width
• 取消事件onCancel
• 确认事件onConfirm

对于没有出入的配置项，使用默认值。

二、封装弹框modal.js

弹框分标题区、内容区、操作区三部分，主要包含标题、关闭按钮、展示内容、确定/取消事件

class Modal {
  constructor(options) {
    this.options = Object.assign(
      {
        title: "标题",
        showClose: true,
        content: "",
        showCancel: true,
        showConfirm: true,
        cancelText: "取消",
        confirmText: "确定",
        width: "480px",
        onCancel: () => {
          this.closeModal();
        },
        onConfirm: () => {
          this.confirmModal;
        },
      },
      options
    );
  }
  init() {
    let maskDom = document.createElement("div");
    maskDom.className = "el-overlay";
    let dialogDom = document.createElement("div");
    dialogDom.className = "el-dialog";
    dialogDom.style = "width:" + this.options.width;
    let headerDom = document.createElement("div");
    headerDom.className = "el-dialog__header";
    this.createHeader(headerDom);
    let bodyDom = document.createElement("div");
    bodyDom.className = "el-dialog__body";
    this.createBody(bodyDom);
    let footerDom = document.createElement("div");
    footerDom.className = "el-dialog__footer";
    this.createFooter(footerDom);
    dialogDom.appendChild(headerDom);
    dialogDom.appendChild(bodyDom);
    dialogDom.appendChild(footerDom);
    maskDom.appendChild(dialogDom);
    document.body.appendChild(maskDom);
  }
  createHeader(headerDom) {
    let titleDom = document.createElement("span");
    titleDom.className = "el-dialog__title";
    titleDom.innerText = this.options.title;
    headerDom.appendChild(titleDom);
    if (this.options.showClose) {
      let closeDom = document.createElement("button");
      closeDom.className = "el-dialog__headerbtn";
      closeDom.type = 'button';
      closeDom.onclick = this.options.onCancel;
      closeDom.innerHTML = '<i class="el-dialog__close el-icon el-icon-close"></i>';
      headerDom.appendChild(closeDom);
    }
  }
  createBody(bodyDom) {
    bodyDom.innerHTML = this.options.content;
  }
  createFooter(footerDom) {
    if (this.options.showCancel) {
      let cancelDom = document.createElement("button");
      cancelDom.className = "el-button el-button--default el-button--mini";
      cancelDom.type = "button";
      cancelDom.innerText = this.options.cancelText;
      cancelDom.onclick = this.options.onCancel;
      footerDom.appendChild(cancelDom);
    }
    if (this.options.showConfirm) {
      let confirmDom = document.createElement("button");
      confirmDom.className = "el-button el-button--primary el-button--mini";
      confirmDom.type = "button";
      confirmDom.innerText = this.options.confirmText;
      confirmDom.onclick = this.options.onConfirm;
      footerDom.appendChild(confirmDom);
    }
  }
  closeModal() {
    console.log('closeModal');
    document.body.removeChild(document.getElementsByClassName("el-overlay")[0]);
  }
  confirmModal() {
    console.log("confirm");
    document.body.removeChild(document.getElementsByClassName("el-overlay")[0]);
  }
}

使用modal.js

new Modal({})

        以index.html为例：

<script src="./js/modal.js"></script>

    function openModal() {
      modal = new Modal({
        title: "温馨提示",
        showClose: true,
        content:
          '<label style="display: block;padding:16px 0 8px 0;font-weight: bold;line-height:20px;">账号</label>' +
          '<div class="el-input">' +
          '<input class="el-input__inner" type="text" name="name" style="background:#F4F6F8;border:none;">' +
          "</div>" +
          '<label style="display: block;padding:16px 0 8px 0;font-weight: bold;line-height:20px;">密码</label>' +
          '<div class="el-input">' +
          '<input class="el-input__inner" type="text" name="pwd" style="background:#F4F6F8;border:none;">' +
          "</div>",
        showCancel: false,
        showConfirm: true,
        confirmText: "保存",
        width: "480px",
        onConfirm: () => {
          save();
        },
      });
      modal.init();
    }
    function save() {
      let name = document.getElementsByName("name")[0].value;
      let pwd = document.getElementsByName("pwd")[0].value;
      if (!key || !secret) {
        messageTip('请输入账号和密码');
        return;
      }
      let params = {
        name,
        pwd,
      };
      console.log(params);
      modal.closeModal();
      modal = null;
    }