我如何在网站上创建一个弹出窗口https://www.sublimotionibiza.com/es/main.html

Question

我想创建与您在网站上单击联系人按钮时相同的弹出窗口：https://www.sublimotionibiza.com/es/main.html.如果有人能告诉我以下代码哪里出了问题，我已经尝试创建这个缓慢移动的打开弹出窗口。这是代码，我试过了。

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");
});

* {
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;
}

<div class="popup">
<div class="popup-container">
<h1>Title</h1>
<p>information: email: [e-mail] tel: [phone]</p>
<div class="popup-close">&times;</div>
</div>
</div>
<button id="open-popup">Open Popup</button>

Answer 1

如果你想让它更大，它的大小应该在开始时为0，然后固定大小编号