CSS实现弹窗效果详细教程

.modal.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.modal.active .modal-content {
  transform: scale(1);
}

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

// 显示模态框（例如点击某个按钮）
function showModal() {
  modal.classList.add('active');
}

// 隐藏模态框
function hideModal() {
  modal.classList.remove('active');
}

// 点击关闭按钮或遮罩外部可关闭
closeBtn.onclick = hideModal;
window.onclick = function(event) {
  if (event.target === modal) {
    hideModal();
  }
}