js自定义弹框插件的封装

接下来我会详细讲解一下 JavaScript 自定义弹框插件的封装攻略。

1. 弹框插件的封装

1.1. 功能概述

一般情况下，弹框插件需要实现以下功能：

显示弹框
隐藏弹框
设置弹框标题
设置弹框内容
设置弹框按钮及其点击事件
点击淡入淡出效果
点击遮罩层隐藏弹框

1.2. 思路分析

弹框插件应当具备可扩展性，考虑采用面向对象思想进行封装。
弹框插件的 DOM 结构应当在插件中生成，而不是在 HTML 中写死。
采用添加和删除类名的方式控制弹框的显示和隐藏。
采用事件委托的方式，监听按钮的点击事件，实现多个按钮共用一个点击事件函数。

1.3. 代码实现

下面是一个简单的示例代码：

class Modal {
  constructor() {
    this.modal = document.createElement('div');
    this.modal.classList.add('modal');
  }

  setTitle(title) {
    const el = document.createElement('h2');
    el.textContent = title;
    this.modal.appendChild(el);
  }

  setContent(content) {
    const el = document.createElement('p');
    el.textContent = content;
    this.modal.appendChild(el);
  }

  addButton(text, callback) {
    const el = document.createElement('button');
    el.textContent = text;
    el.addEventListener('click', callback);
    this.modal.appendChild(el);
  }

  show() {
    document.body.appendChild(this.modal);
    setTimeout(() => {
      this.modal.classList.add('modal--visible');
    }, 0);
  }

  hide() {
    this.modal.classList.remove('modal--visible');
    setTimeout(() => {
      document.body.removeChild(this.modal);
    }, 300);
  }
}

上述代码中，Modal 类封装了弹框的显示、隐藏、设置标题、设置内容、添加按钮等功能，同时支持多按钮共用一个点击事件函数。

2. 使用示例

2.1. 简单示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Modal Demo</title>
    <style>
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
      }

      .modal--visible {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .modal__wrapper {
        width: 400px;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
      }

      .modal__title {
        font-size: 20px;
        margin-bottom: 10px;
      }

      .modal__content {
        margin-bottom: 20px;
      }

      .modal__button {
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
        color: white;
        background-color: #3f51b5;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button id="btn">Show Modal</button>
    <script>
      const modal = new Modal();

      modal.setTitle('提示');
      modal.setContent('您确定要删除吗？');
      modal.addButton('确定', () => {
        alert('删除成功！');
        modal.hide();
      });
      modal.addButton('取消', () => {
        modal.hide();
      });

      document.querySelector('#btn').addEventListener('click', () => {
        modal.show();
      });
    </script>
  </body>
</html>

2.2. 优化示例

上面的示例代码实现了一个简单的弹框插件，但是如果要实现更强大的功能，还需进一步优化。下面是一个优化示例，这个示例为弹框插件增加了以下特性：

采用 Promise 实现点击按钮后的异步处理；
支持配置多个按钮，且按钮可以设置不同的样式；
支持配置点击遮罩层是否隐藏弹框；
支持配置是否点击按钮后自动隐藏弹框；
采用 CSS3 实现弹出和关闭动画效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Modal Demo</title>
    <style>
      /* 弹框样式 */
      .modal {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s, visibility 0s 0.3s;
        opacity: 0;
        visibility: hidden;
        z-index: 999;
      }

      .modal.modal--visible {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
      }

      .modal__dialog {
        box-sizing: border-box;
        position: relative;
        margin: 10vh auto;
        padding: 10px;
        width: 400px;
        max-height: 80vh;
        background-color: #fff;
        overflow: auto;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }

      .modal__header,
      .modal__footer {
        text-align: center;
        padding: 5px 0;
      }

      .modal__close {
        position: absolute;
        top: 5px;
        right: 5px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
      }

      .modal__title {
        font-size: 20px;
        margin: 0;
      }

      .modal__content {
        margin: 10px 0;
      }

      .modal__button {
        margin-right: 10px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
      }

      /* 按钮样式 */
      .modal__button--primary {
        color: #fff;
        background-color: #3f51b5;
      }

      .modal__button--info {
        color: #fff;
        background-color: #2196f3;
      }

      .modal__button--success {
        color: #fff;
        background-color: #4caf50;
      }

      .modal__button--warning {
        color: #fff;
        background-color: #ff9800;
      }

      .modal__button--danger {
        color: #fff;
        background-color: #f44336;
      }

      /* 遮罩层样式 */
      .modal--no-mask .modal {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <button id="btn">Show Modal</button>
    <script>
      const modal = new Modal();

      modal.setTitle('提示');
      modal.setContent('您确定要删除吗？');
      modal.addButton({
        text: '确定',
        style: 'modal__button--primary',
        callback: () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              alert('删除成功！');
              resolve();
            }, 1000);
          });
        }
      });
      modal.addButton({
        text: '取消',
        style: 'modal__button--warning',
        autoHide: true,
        callback: () => {
          console.log('取消');
        }
      });
      modal.addButton({
        text: '自定义按钮',
        style: 'modal__button--info',
        callback: () => {
          console.log('自定义按钮');
        }
      });

      modal.show();

      document.querySelector('#btn').addEventListener('click', () => {
        modal.show();
      });
    </script>
  </body>
</html>

上述代码中，我们优化了弹框的样式，同时实现了点击按钮后的异步处理和更多样式按钮的配置，还支持配置是否点击遮罩层是否隐藏弹框，是否点击按钮后自动隐藏弹框。

这个示例的效果应该比前面的简单示例要好很多。同时，这个示例也展示了弹框插件封装的可扩展性和易用性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js自定义弹框插件的封装 - Python技术站