I found this modal I'm using on Codepen https://codepen.io/benfrain/pen/wvayeWq and wondering how I can make the modal fade in and out rather than just popping in and out.
Thank you in advance.
var btn = document.getElementById("btn");
btn.addEventListener("click", e => {
document.documentElement.setAttribute("data-modal-active",
document.documentElement.getAttribute("data-modal-active") === "true" ? "false" : "true")
});
aside {
position: absolute;
z-index: 100;
background-color: #777;
top: 50%;
left: 50%;
overflow: auto;
max-height: 80vh;
transform: translate(-50%, -50%);
display: none;
flex-direction: column;
[data-modal-active="true"] & {
display: flex;
}
}
I get it now, sorry didn't notice the change in value first. Thank you a lot for the help.
CSS
aside {
position: absolute;
z-index: 100;
background-color: #777;
top: 50%;
left: 50%;
overflow: auto;
max-height: 80vh;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
visibility: hidden;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
opacity: 0;
-webkit-transition: visibility 0.5s, opacity 0.5s linear;
transition: visibility 0.5s, opacity 0.5s;