带有功能关闭按钮的弹出窗口(HTML、CSS、JavaScript)

<div id="popup" class="popup">
  <div class="popup-content">
    <span class="close-button">&times;</span>
    <h2>弹出窗口标题</h2>
    <p>弹出窗口内容</p>
  </div>
</div>

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}

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

var popup = document.getElementById("popup");
var closeButton = document.querySelector(".close-button");

function openPopup() {
  popup.style.display = "block";
}

function closePopup() {
  popup.style.display = "none";
}

closeButton.addEventListener("click", closePopup);