Me gustaría crear la misma ventana emergente que sucede cuando hace clic en el botón de contacto del sitio: https://www.sublimotionibiza.com/es/main.html . Si alguien puede mostrarme dónde me equivoqué con el siguiente código, he intentado crear esta ventana emergente de apertura lenta. Aquí está el código, lo intenté.
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>si desea hacerlo más grande, su tamaño debe ser 0 al principio y luego el número de tamaño fijo