当前位置：首页 > CSS

css制作popup

2026-02-12 18:53:15CSS

css制作popup

使用CSS制作Popup弹窗

通过CSS和HTML结合可以创建简单的弹窗效果，以下是几种常见方法：

纯CSS弹窗（无JavaScript）

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
}

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

#popup-toggle:checked + .popup {
  display: flex;
}
</style>

<input type="checkbox" id="popup-toggle" hidden>
<label for="popup-toggle" class="open-button">打开弹窗</label>

<div class="popup">
  <div class="popup-content">
    <h3>弹窗标题</h3>
    <p>这里是弹窗内容...</p>
    <label for="popup-toggle" class="close-button">关闭</label>
  </div>
</div>

CSS动画弹窗

.popup {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

定位和样式优化

.popup-content {
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  z-index: 100;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 1.2em;
}

响应式设计

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

结合伪类实现悬停弹窗

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
}

这些方法可以根据需要组合使用，纯CSS方案适合简单交互，复杂场景建议结合JavaScript实现更灵活的控制。

css制作popup