当前位置：首页 > JavaScript

js实现页面弹窗

2026-04-04 14:02:39JavaScript

使用原生JavaScript实现弹窗

创建弹窗HTML结构 在HTML文件中添加弹窗的基础结构，通常包括遮罩层和弹窗内容区域：

<div id="modal-overlay" class="modal-overlay">
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <h3>弹窗标题</h3>
    <p>弹窗内容...</p>
  </div>
</div>

添加基础CSS样式 为弹窗添加必要的样式，确保弹窗居中显示并有遮罩效果：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 50%;
  max-width: 500px;
}

.close-btn {
  float: right;
  cursor: pointer;
  font-size: 24px;
}

JavaScript控制逻辑 通过DOM操作实现弹窗的显示和隐藏功能：

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

// 显示弹窗函数
function showModal() {
  modal.style.display = 'flex';
}

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

// 点击关闭按钮隐藏弹窗
closeBtn.addEventListener('click', hideModal);

// 点击遮罩层隐藏弹窗
modal.addEventListener('click', function(e) {
  if (e.target === modal) {
    hideModal();
  }
});

// 按ESC键隐藏弹窗
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    hideModal();
  }
});

使用第三方库实现弹窗

使用SweetAlert2库 安装并引入SweetAlert2库可以快速创建美观的弹窗：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

基本弹窗示例

Swal.fire({
  title: '提示',
  text: '这是一个SweetAlert2弹窗',
  icon: 'success',
  confirmButtonText: '确定'
});

带输入的弹窗

Swal.fire({
  title: '输入内容',
  input: 'text',
  inputLabel: '请输入信息',
  showCancelButton: true,
  inputValidator: (value) => {
    if (!value) {
      return '请输入有效内容'
    }
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('用户输入:', result.value);
  }
});

弹窗最佳实践

动画效果增强体验 为弹窗添加简单的动画效果可以提升用户体验：

.modal-overlay {
  /* 原有样式... */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.show {
  opacity: 1;
}

.modal-content {
  /* 原有样式... */
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.modal-overlay.show .modal-content {
  transform: translateY(0);
}

JavaScript调整 相应修改JavaScript代码以配合动画：

function showModal() {
  modal.classList.add('show');
}

function hideModal() {
  modal.classList.remove('show');
}

可复用弹窗组件 创建可配置的弹窗函数，提高代码复用性：

js实现页面弹窗

function createModal(options) {
  const { title, content, onConfirm, onCancel } = options;

  // 创建弹窗DOM
  const modalHTML = `
    <div class="modal-overlay" id="custom-modal">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h3>${title}</h3>
        <p>${content}</p>
        <div class="modal-buttons">
          <button class="confirm-btn">确定</button>
          <button class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  `;

  document.body.insertAdjacentHTML('beforeend', modalHTML);

  // 添加事件监听
  const modal = document.getElementById('custom-modal');
  const confirmBtn = modal.querySelector('.confirm-btn');
  const cancelBtn = modal.querySelector('.cancel-btn');

  confirmBtn.addEventListener('click', () => {
    if (typeof onConfirm === 'function') onConfirm();
    modal.remove();
  });

  cancelBtn.addEventListener('click', () => {
    if (typeof onCancel === 'function') onCancel();
    modal.remove();
  });

  // 关闭按钮和遮罩层逻辑...
}