css动态框弹不出来

今天，我在做一个网站时，遇到了一个问题。我想在鼠标点击一个按钮时，弹出一个动态框。然而，无论我怎么尝试，动态框都没有弹出来。我检查了代码，发现我的CSS可能出了问题。

.pop-up {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80vw;
  height: 80vh;
  background-color: #fff;
  border-radius: 10px;
  z-index: 10;
}

我发现，我的CSS中设置了display为none，这意味着动态框一开始就被隐藏了。我需要在按钮点击时，将display属性更改为block或者inline-block。于是，我修改了代码：

popUpBtn.addEventListener('click',function () {
  popUp.style.display = 'block';
})

现在，当用户点击按钮时，动态框就会弹出来了。

如果您也遇到了类似的问题，可以检查一下CSS中的display属性是否正确设置。还可以考虑使用JavaScript来控制显示和隐藏。