原生js弹出框封装插件

class Modal {
  constructor(options) {
    this.options = {
      title: '提示',
      content: '',
      buttons: ['确定'],
      ...options
    };
    this.init();
  }

  init() {
    this.modal = document.createElement('div');
    this.modal.className = 'modal';
    this.modal.innerHTML = `
      <div class="modal-content">
        <div class="modal-header">${this.options.title}</div>
        <div class="modal-body">${this.options.content}</div>
        <div class="modal-footer">${this.createButtons()}</div>
      </div>
    `;
    document.body.appendChild(this.modal);
    this.modal.style.display = 'block';
  }

  createButtons() {
    return this.options.buttons.map(buttonText => `
      <button class="modal-button">${buttonText}</button>
    `).join('');
  }

  addButtonListener(buttonText, callback) {
    const buttons = this.modal.querySelectorAll('.modal-button');
    buttons.forEach(button => {
      if (button.textContent === buttonText) {
        button.addEventListener('click', callback);
      }
    });
  }

  hide() {
    this.modal.style.display = 'none';
  }
}

// 使用示例
const modal = new Modal({
  title: '确认操作',
  content: '您确定要执行此操作吗？',
  buttons: ['确定', '取消']
});

modal.addButtonListener('确定', () => {
  console.log('确定按钮被点击');
  modal.hide();
});

modal.addButtonListener('取消', () => {
  console.log('取消按钮被点击');
  modal.hide();
});