一个功能完善的JS模态窗口类

以下是一个功能完善的模态窗口类的封装，使用纯JavaScript编写：

class Modal {
  constructor(options = {}) {
    this.options = {
      title: options.title || '提示',
      content: options.content || '',
      width: options.width || '400px',
      buttons: options.buttons || [],
      maskClosable: options.maskClosable !== undefined ? options.maskClosable : true
    };
    this.modal = null;
    this.mask = null;
  }

  // 创建模态窗口
  createModal() {
    // 创建遮罩层
    this.mask = document.createElement('div');
    this.mask.className = 'modal-mask';
    this.mask.style.position = 'fixed';
    this.mask.style.top = '0';
    this.mask.style.left = '0';
    this.mask.style.right = '0';
    this.mask.style.bottom = '0';
    this.mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    this.mask.style.zIndex = '1000';

    // 创建模态窗口容器
    this.modal = document.createElement('div');
    this.modal.className = 'modal-container';
    this.modal.style.position = 'fixed';
    this.modal.style.top = '50%';
    this.modal.style.left = '50%';
    this.modal.style.transform = 'translate(-50%, -50%)';
    this.modal.style.backgroundColor = '#fff';
    this.modal.style.width = this.options.width;
    this.modal.style.zIndex = '1001';
    this.modal.style.borderRadius = '5px';
    this.modal.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
    this.modal.style.overflow = 'hidden';

    // 创建模态窗口头部
    const header = document.createElement('div');
    header.className = 'modal-header';
    header.style.display = 'flex';
    header.style.justifyContent = 'space-between';
    header.style.alignItems = 'center';
    header.style.padding = '15px 20px';
    header.style.borderBottom = '1px solid #eee';

    const title = document.createElement('h3');
    title.style.margin = '0';
    title.style.fontWeight = '500';
    title.textContent = this.options.title;

    const closeBtn = document.createElement('span');
    closeBtn.className = 'modal-close';
    closeBtn.style.cursor = 'pointer';
    closeBtn.style.fontSize = '18px';
    closeBtn.textContent = '×';
    closeBtn.addEventListener('click', () => this.close());

    header.appendChild(title);
    header.appendChild(closeBtn);

    // 创建模态窗口主体
    const body = document.createElement('div');
    body.className = 'modal-body';
    body.style.padding = '20px';
    body.innerHTML = this.options.content;

    // 创建模态窗口底部
    const footer = document.createElement('div');
    footer.className = 'modal-footer';
    footer.style.padding = '15px 20px';
    footer.style.borderTop = '1px solid #eee';
    footer.style.display = 'flex';
    footer.style.justifyContent = 'flex-end';

    // 添加按钮
    this.options.buttons.forEach(button => {
      const btn = document.createElement('button');
      btn.style.marginLeft = '10px';
      btn.style.padding = '6px 15px';
      btn.style.border = 'none';
      btn.style.borderRadius = '3px';
      btn.style.cursor = 'pointer';
      btn.textContent = button.text;
      btn.style.backgroundColor = button.bgColor || '#f0f0f0';
      btn.style.color = button.color || '#333';
      btn.addEventListener('click', button.callback);
      footer.appendChild(btn);
    });

    // 将各部分添加到模态窗口
    this.modal.appendChild(header);
    this.modal.appendChild(body);
    if (this.options.buttons.length > 0) {
      this.modal.appendChild(footer);
    }

    // 将遮罩层和模态窗口添加到body
    document.body.appendChild(this.mask);
    document.body.appendChild(this.modal);

    // 遮罩层点击关闭
    if (this.options.maskClosable) {
      this.mask.addEventListener('click', () => this.close());
    }
  }

  // 打开模态窗口
  open() {
    this.createModal();
  }

  // 关闭模态窗口
  close() {
    if (this.modal) {
      document.body.removeChild(this.modal);
      this.modal = null;
    }
    if (this.mask) {
      document.body.removeChild(this.mask);
      this.mask = null;
    }
  }

  // 添加按钮
  addButton(text, callback, bgColor = '#f0f0f0', color = '#333') {
    this.options.buttons.push({
      text,
      callback,
      bgColor,
      color
    });
    return this;
  }
}

使用示例

// 创建模态窗口实例
const modal = new Modal({
  title: '用户信息',
  content: '<p>用户名：张三</p><p>邮箱：zhangsan@example.com</p>',
  width: '500px',
  buttons: [
    {
      text: '确定',
      callback: () => {
        alert('确定按钮被点击');
        modal.close();
      },
      bgColor: '#2196F3',
      color: '#fff'
    },
    {
      text: '取消',
      callback: () => {
        alert('取消按钮被点击');
        modal.close();
      },
      bgColor: '#f44336',
      color: '#fff'
    }
  ],
  maskClosable: true
});

// 打开模态窗口
modal.open();

// 或者动态添加按钮
const modal2 = new Modal({
  title: '提示',
  content: '这是一个动态添加按钮的模态窗口'
});
modal2.addButton('关闭', () => modal2.close(), '#333', '#fff');
modal2.open();

功能说明

1. 基本功能：

   • 显示和关闭模态窗口
   • 自定义标题和内容
   • 设置模态窗口宽度

2. 按钮支持：

   • 添加多个按钮
   • 为每个按钮设置文本、点击事件、背景色和文字颜色

3. 遮罩层功能：

   • 点击遮罩层关闭模态窗口（可配置）

4. 样式：

   • 简洁美观的默认样式
   • 圆角和阴影效果提升视觉体验

这个模态窗口类可以根据需要进一步扩展，比如添加动画效果、支持HTML内容、增加模态窗口居中等功能。