如何实现Sublimotion Ibiza网站同款弹窗？求排查代码问题

我想实现某网站点击联系按钮时弹出的同款缓慢展开弹窗，自己编写了代码但未达到预期效果，麻烦帮忙排查问题。我的代码如下：

原JS代码 #

document.querySelector("#open-popup").addEventListener("click",function(){
  document.querySelector(".popup").classList.add("active");
});

document.querySelector(".popup .popup-container .popup-close").addEventListener("click",function(){
  document.querySelector(".popup").classList.remove("active");
});

原CSS代码 #

* {
  margin:0px;
}
.popup {
  position:fixed;
  top:-100vh;
  left:0px;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  transition:top 0ms ease-in-out 900ms;
}
.popup.active {
  transition:top 0ms ease-in-out;
  top:0vh;
}
.popup .popup-container {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1.2);
  width:400px;
  padding:30px 20px 20px;
  background:#eee;
  opacity:0.5;
  transition:all 900ms ease-in-out;
}
.popup.active .popup-container {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.popup .popup-container .popup-close {
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  background:#111;
  text-align:center;
  line-height:30px;
  color:#eee;
  border-radius:50%;
  font-size:20px;
  font-weight:600;
  cursor:pointer;
}
.popup .popup-container h1 {
  text-align:center;
  font-size:30px;
  font-family:"Raleway";
  color:#222;
}
.popup .popup-container p {
  margin-top:10px;
  font-size:15px;
  font-family:"Raleway";
  color:#555;
}

原HTML代码 #

<div class="popup">
  <div class="popup-container">
    <h1>Title</h1>
    <p>information: email: spencerhalstead27@gmail.com tel: 073 814 8752</p>
    <div class="popup-close">&times;</div>
  </div>
</div>

<button id="open-popup">Open Popup</button>

原代码存在的问题 #

1. 隐藏方式不合理：用top:-100vh将弹窗移出视口，导致打开时背景瞬间显示，没有淡入过渡，和目标网站的渐变效果不符。
2. 容器初始状态不自然：容器初始opacity:0.5，不是从完全透明开始，视觉上没有“渐显展开”的层次感。
3. 过渡设置不符合需求：过渡时间过长（900ms）且曲线单一，没有目标网站那种弹性展开的流畅感。
4. 缺少层级控制：未设置z-index，弹窗可能被页面其他元素遮挡。
5. 盒模型问题：未添加box-sizing:border-box，容器的padding会撑大实际宽度，导致布局超出预期。

修改后的代码（贴合目标效果） #

JS代码（优化性能）

const openBtn = document.querySelector("#open-popup");
const popup = document.querySelector(".popup");
const closeBtn = popup.querySelector(".popup-close");

openBtn.addEventListener("click", () => popup.classList.add("active"));
closeBtn.addEventListener("click", () => popup.classList.remove("active"));

CSS代码（还原目标弹窗效果）

* {
  margin: 0;
  box-sizing: border-box;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease-in-out, visibility 0ms ease-in-out 300ms;
  z-index: 9999;
}
.popup.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease-in-out, visibility 0ms ease-in-out;
}
.popup .popup-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 400px;
  padding: 40px 30px 30px;
  background: #fff;
  opacity: 0;
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 300ms ease-in-out;
  border-radius: 8px;
}
.popup.active .popup-container {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.popup .popup-container .popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 28px;
  height: 28px;
  background: #f0f0f0;
  text-align: center;
  line-height: 28px;
  color: #333;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: background 200ms ease;
}
.popup .popup-container .popup-close:hover {
  background: #e0e0e0;
}
.popup .popup-container h1 {
  text-align: center;
  font-size: 28px;
  font-family: "Raleway", sans-serif;
  color: #222;
  margin-bottom: 15px;
}
.popup .popup-container p {
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  color: #555;
  line-height: 1.6;
  text-align: center;
}

HTML代码（优化显示）

<div class="popup">
  <div class="popup-container">
    <h1>联系我们</h1>
    <p>邮箱：spencerhalstead27@gmail.com<br>电话：073 814 8752</p>
    <div class="popup-close">&times;</div>
  </div>
</div>

<button id="open-popup">打开弹窗</button>

内容的提问来源于stack exchange，提问作者Spencer Halstead