I would like to create the same popup that happens, when you click the contact button from the site: https://www.sublimotionibiza.com/es/main.html. If somebody can just show me where I have gone wrong with the following code I have tried to create this slow moving opening popup. Here is the code, I tried.
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: spencerhalstead27@gmail.com tel: 073 814 8752</p>
<div class="popup-close">×</div>
</div>
</div>
<button id="open-popup">Open Popup</button>if you want to make it bigger, it's size should be 0 at the beginning, and then fixed size number