0

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;
    }
}
Elle
  • 1
  • Does this answer your question? [Transitions on the CSS display property](https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property) - https://codepen.io/lcherone/pen/MWrXzVX – Lawrence Cherone Apr 10 '22 at 23:57
  • That adds a nice fade in thank you. I'd like it to fade out as well. I tried to add [data-modal-active="false"] aside { visibility: hidden; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } but I have no idea what I'm doing on this level. – Elle Apr 11 '22 at 00:11
  • np, see pen again `transition: visibility 0.5s, opacity 0.5s;` – Lawrence Cherone Apr 11 '22 at 00:15
  • I tried this [data-modal-active="false"] aside { visibility: visible; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } which seem to add a fade out as well. Not sure it's how you're supposed to do it, but it seem to work. – Elle Apr 11 '22 at 00:22

1 Answers1

0

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;
Elle
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 11 '22 at 05:34