css制作popup

使用CSS制作Popup弹窗

通过CSS可以创建简单的弹窗效果，结合HTML和JavaScript实现交互功能。以下是几种常见的方法：

HTML结构

<div class="popup-container">
  <button class="popup-trigger">点击打开弹窗</button>
  <div class="popup-content">
    <span class="close-btn">&times;</span>
    <p>这里是弹窗内容</p>
  </div>
</div>

基础CSS样式

.popup-content {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 1000;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.popup-trigger:hover {
  background-color: #f0f0f0;
}

纯CSS触发方式

.popup-trigger:focus + .popup-content {
  display: block;
}

/* 添加遮罩层 */
.popup-content::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: -1;
}

JavaScript控制版本

document.querySelector('.popup-trigger').addEventListener('click', function() {
  document.querySelector('.popup-content').style.display = 'block';
});

document.querySelector('.close-btn').addEventListener('click', function() {
  document.querySelector('.popup-content').style.display = 'none';
});

动画效果增强

为弹窗添加进场动画：

.popup-content {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -60%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

响应式设计调整

针对移动设备的样式优化：

@media (max-width: 600px) {
  .popup-content {
    width: 90%;
    max-width: 300px;
  }
}

无障碍访问建议

1. 为弹窗添加role="dialog"和aria-modal="true"属性
2. 关闭按钮添加aria-label="Close"
3. 弹窗激活时自动聚焦到内容区域
4. 用ESC键支持关闭弹窗

// 获取焦点到弹窗内的第一个可交互元素
document.querySelector('.popup-content').setAttribute('tabindex', '-1');
document.querySelector('.popup-content').focus();

这些方法可以根据实际需求组合使用，创建符合项目需求的弹窗效果。