I wish to create an analogous popup with css and javascript as on the contact button when clicked, on the positioning https://www.sublimotionibiza.com/es/foremost.html. They may have used a website builder to do it, however I wish to know whether it is attainable to create very same popup utilizing code.
I’ve tried the next code, which doesn’t open slowly from backside shifting upwards, as within the web site above.
e mail: spencerhalstead27@gmail.com or tel: 073 814 8752
×
Open Popup
* {
margin:0px;
}
.popup {
place:fastened;
prime:-100vh;
left:0px;
width:100%;
top:100%;
background:rgba(0,0,0,0.5);
transition:prime 0ms ease-in-out 900ms;
}
.popup.energetic {
transition:prime 0ms ease-in-out;
prime:0vh;
}
.popup .popup-container {
place:absolute;
prime:50%;
left:50%;
rework:translate(-50%,-50%) scale(1.2);
width:400px;
padding:30px 20px 20px;
background:#eee;
opacity:0.5;
transition:all 900ms ease-in-out;
}
.popup.energetic .popup-container {
opacity:1;
rework:translate(-50%,-50%) scale(1);
}
.popup .popup-container .popup-close {
place:absolute;
prime:10px;
proper:10px;
width:30px;
top:30px;
background:#111;
text-align:middle;
line-height:30px;
coloration:#eee;
border-radius:50%;
font-size:20px;
font-weight:600;
cursor:pointer;
}
.popup .popup-container h1 {
text-align:middle;
font-size:30px;
font-family:”Raleway”;
coloration:#222;
}
.popup .popup-container p {
margin-top:10px;
font-size:15px;
font-family:”Raleway”;
coloration:#555;
}
doc.querySelector(“#open-popup”).addEventListener(“click on”,perform(){
doc.querySelector(“.popup”).classList.add(“energetic”);
});
doc.querySelector(“.popup .popup-container .popup-close”).addEventListener(“click on”,perform(){
doc.querySelector(“.popup”).classList.take away(“energetic”);
});
