如何制作背景模糊的弹出式窗口

<div class="container">
  <button class="open-button">打开窗口</button>
  <div class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>弹出窗口标题</h2>
      <p>弹出窗口内容</p>
    </div>
  </div>
</div>

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.open-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  backdrop-filter: blur(5px); /* 背景模糊效果 */
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

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

// 获取元素
var openButton = document.querySelector('.open-button');
var modal = document.querySelector('.modal');
var closeButton = document.querySelector('.close');

// 打开弹出窗口
openButton.addEventListener('click', function() {
  modal.style.display = 'block';
});

// 关闭弹出窗口
closeButton.addEventListener('click', function() {
  modal.style.display = 'none';
});