如何在弹出窗口出现和消失后延迟背景显示

<div id="popup" class="popup">
  <!-- 弹出窗口内容 -->
  <h2>弹出窗口标题</h2>
  <p>弹出窗口内容</p>
  <button id="closeBtn">关闭</button>
</div>
<div id="background" class="background"></div>

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  z-index: 9999;
}

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

// 获取弹出窗口和背景元素
var popup = document.getElementById('popup');
var background = document.getElementById('background');
var closeBtn = document.getElementById('closeBtn');

// 显示弹出窗口
function showPopup() {
  popup.style.display = 'block';
  background.style.display = 'block';
}

// 关闭弹出窗口
function closePopup() {
  popup.style.display = 'none';
  // 延迟背景显示
  setTimeout(function() {
    background.style.display = 'block';
  }, 1000); // 延迟时间为1秒
}

// 监听关闭按钮点击事件
closeBtn.addEventListener('click', closePopup);

// 示例：通过调用showPopup函数来显示弹出窗口
showPopup();