当前位置：首页 > JavaScript

js实现弹窗

2026-04-04 01:36:00JavaScript

使用原生JavaScript实现弹窗

创建基本HTML结构

<div id="popup" class="popup">
  <div class="popup-content">
    <span class="close-btn">&times;</span>
    <p>这里是弹窗内容</p>
  </div>
</div>

添加CSS样式

.popup {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.popup-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  position: relative;
}

.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript控制逻辑

// 获取DOM元素
const popup = document.getElementById('popup');
const closeBtn = document.querySelector('.close-btn');

// 显示弹窗函数
function showPopup() {
  popup.style.display = 'block';
}

// 隐藏弹窗函数
function hidePopup() {
  popup.style.display = 'none';
}

// 点击关闭按钮
closeBtn.addEventListener('click', hidePopup);

// 点击弹窗外部区域关闭
window.addEventListener('click', (event) => {
  if (event.target === popup) {
    hidePopup();
  }
});

// 示例：点击按钮显示弹窗
document.getElementById('showPopupBtn').addEventListener('click', showPopup);

使用第三方库实现弹窗

SweetAlert2库实现

// 引入SweetAlert2库
import Swal from 'sweetalert2';

// 基础弹窗
Swal.fire('Hello world!');

// 带配置的弹窗
Swal.fire({
  title: '提示',
  text: '操作成功完成',
  icon: 'success',
  confirmButtonText: '确定'
});

// 确认对话框
Swal.fire({
  title: '确认删除?',
  text: "删除后将无法恢复!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: '确认删除'
}).then((result) => {
  if (result.isConfirmed) {
    // 用户点击确认后的操作
  }
});

实现模态对话框

创建可复用的模态组件

class Modal {
  constructor(content, options = {}) {
    this.content = content;
    this.options = Object.assign({
      closeOnOutsideClick: true,
      showCloseButton: true
    }, options);

    this.init();
  }

  init() {
    this.createModal();
    this.bindEvents();
  }

  createModal() {
    this.modal = document.createElement('div');
    this.modal.className = 'modal-overlay';
    this.modal.innerHTML = `
      <div class="modal-content">
        ${this.options.showCloseButton ? '<span class="modal-close">&times;</span>' : ''}
        ${this.content}
      </div>
    `;
    document.body.appendChild(this.modal);
  }

  bindEvents() {
    if (this.options.showCloseButton) {
      this.modal.querySelector('.modal-close').addEventListener('click', () => this.close());
    }

    if (this.options.closeOnOutsideClick) {
      this.modal.addEventListener('click', (e) => {
        if (e.target === this.modal) {
          this.close();
        }
      });
    }
  }

  open() {
    this.modal.style.display = 'flex';
  }

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

// 使用示例
const myModal = new Modal('<p>自定义模态内容</p>');
document.getElementById('openModal').addEventListener('click', () => myModal.open());