js实现页面弹窗

使用HTML和CSS创建弹窗结构

弹窗通常由一个遮罩层和弹窗内容组成。HTML结构可以这样设计：

<div class="modal-mask">
  <div class="modal-container">
    <div class="modal-header">
      <h3>弹窗标题</h3>
      <span class="close-btn">&times;</span>
    </div>
    <div class="modal-body">
      弹窗内容区域
    </div>
  </div>
</div>

CSS样式需要设置遮罩层和弹窗的定位：

.modal-mask {
  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;
}

.modal-container {
  background: white;
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.33);
}

基本JavaScript控制逻辑

通过DOM操作控制弹窗显示和隐藏：

const modal = document.querySelector('.modal-mask');
const closeBtn = document.querySelector('.close-btn');

function openModal() {
  modal.style.display = 'flex';
}

function closeModal() {
  modal.style.display = 'none';
}

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

// 点击遮罩层关闭
modal.addEventListener('click', function(e) {
  if(e.target === modal) {
    closeModal();
  }
});

动态内容弹窗实现

需要传递动态内容时，可以创建函数接收参数：

function showModal(title, content) {
  document.querySelector('.modal-header h3').textContent = title;
  document.querySelector('.modal-body').innerHTML = content;
  openModal();
}

// 调用示例
showModal('提示', '<p>这是一个动态内容的弹窗</p>');

使用Promise实现确认弹窗

对于确认对话框，可以返回Promise：

function confirmModal(message) {
  return new Promise((resolve) => {
    const modal = document.createElement('div');
    modal.className = 'modal-mask';
    modal.innerHTML = `
      <div class="modal-container">
        <div class="modal-body">${message}</div>
        <div class="modal-footer">
          <button class="confirm-btn">确定</button>
          <button class="cancel-btn">取消</button>
        </div>
      </div>
    `;

    document.body.appendChild(modal);

    modal.querySelector('.confirm-btn').addEventListener('click', () => {
      document.body.removeChild(modal);
      resolve(true);
    });

    modal.querySelector('.cancel-btn').addEventListener('click', () => {
      document.body.removeChild(modal);
      resolve(false);
    });
  });
}

// 使用示例
confirmModal('确定要删除吗？').then(result => {
  console.log(result ? '用户点击了确定' : '用户点击了取消');
});

动画效果增强

添加CSS过渡动画让弹窗更平滑：

.modal-container {
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal-mask.show .modal-container {
  transform: scale(1);
  opacity: 1;
}

JavaScript中修改显示逻辑：

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

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

第三方库方案

如果项目允许使用第三方库，推荐以下方案：

• SweetAlert2：提供美观的弹窗效果
• Micromodal：轻量级可访问性弹窗库
• Bootstrap Modal：Bootstrap框架的弹窗组件

使用SweetAlert2的示例：

import Swal from 'sweetalert2';

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