I would like to be able to do the same as that sites popup using the html widget in elementor. I have put the following code, but the popup still does not come out the same as that one. If you could tell me, what I should change in my code to do the same. Here is my code:
<div class="popup">
<div class="popup-container">
<h1>Title</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum officia possimus consequuntur repellendus quaerat natus commodi recusandae dicta aut ipsam illo dolor consectetur assumenda, quo, in voluptatem maxime dignissimos neque!</p>
<div class="popup-close">×</div>
</div>
</div>
<button id="open-popup">Open Popup</button>
* {
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 300ms;
}
.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 300ms 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
ointer;
}
.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;
}
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");
});
