如何用原生js写一个弹窗消息提醒插件

如何用原生JavaScript写一个弹窗消息提醒插件：

1. 需要实现的功能
   我们需要写一个弹窗插件，可以根据传入的参数来动态调整弹窗的显示内容和样式。弹窗需要包含以下功能：

2. 显示特定的消息，并根据消息类型展示不同的图标

3. 显示不同类型消息对应的背景颜色和字体颜色
4. 提供一个可控制的时间参数，可以设置多久后自动关闭弹窗，如果不设置时间则需要点击弹窗才能关闭

5. 提供一个可选的回调函数，在用户点击弹窗或者弹窗自动关闭时调用该回调函数

6. 实现代码
   下面是实现代码：

class Alert {
  constructor(message, options = {}) {
    this.message = message;
    this.options = options;
    this.container = document.createElement("div");
    this.container.className = "alert";
    this.render();
    document.body.appendChild(this.container);
  }

  render() {
    const { type = "default", duration = 0, callback } = this.options;
    const colors = {
      success: { background: "#DFF2BF", color: "#4F8A10" },
      info: { background: "#BDE5F8", color: "#00529B" },
      warning: { background: "#FFF2BF", color: "#9F6000" },
      danger: { background: "#FEE2E2", color: "#9F0000" },
      default: { background: "#F0F0F0", color: "#333" },
    };
    const color = colors[type];
    this.container.style.backgroundColor = color.background;
    this.container.style.color = color.color;

    const content = document.createElement("div");
    content.className = "alert-message";
    const icon = document.createElement("i");
    icon.className = `alert-icon ${type}-icon`;
    content.appendChild(icon);
    const message = document.createElement("span");
    message.innerHTML = this.message;
    content.appendChild(message);
    this.container.appendChild(content);

    const close = document.createElement("i");
    close.className = "alert-close";
    close.innerHTML = "×";
    content.appendChild(close);

    if (duration > 0) {
      setTimeout(() => {
        this.close();
        if (callback) callback();
      }, duration * 1000);
    } else {
      close.style.display = "block";
    }

    content.addEventListener("click", () => {
      this.close();
      if (callback) callback();
    });

    close.addEventListener("click", (e) => {
      e.stopPropagation();
      this.close();
      if (callback) callback();
    });
  }

  close() {
    document.body.removeChild(this.container);
  }
}

1. 示例说明
   示例1：假设某个登录页面需要提示用户登录成功，我们可以通过如下代码使用Alert插件：

const alert = new Alert("登录成功！", {type: "success", duration: 3});

这里传入的参数包括消息内容和一个options对象。options对象中可传入type、duration和callback三个参数，其中type表示消息类型，duration表示自动关闭时间（秒），callback表示弹窗关闭时要执行的回调函数。本例中，消息类型为success，表示登录成功；duration为3，表示3秒后自动关闭；此处未传入callback参数，所以不会执行回调函数。

示例2：假设我们需要向用户展示一个警告信息并且不自动关闭，我们可以这样写：

const alert = new Alert("您尚未填写用户名！", {type: "warning"});

由于duration默认为0，所以弹窗不会自动关闭，用户需要手动关闭弹窗。