<section>
  <h1>HERE YOU GOT A CONTENT</h1>
  <button>Click me</button>
</section>
<div class="popUp body360 body360--center">
  <div class="popUp-closer" onclick="closePopUp()">
    <div class="popUp-closer-barre"></div>
    <div class="popUp-closer-barre"></div>
    <div class="popUp-closer-barre"></div>
    <div class="popUp-closer-barre"></div>
  </div>
  <div class="body360-content">
    <div class="body360-title">
      HERE YOU GOT A POPUP
    </div>
  </div>
</div>
$c-primary: #b098db;
$c-secondary: #c1c1c1;
$c-tercary: #9373c0;
$c-green: #008d36;
$c-red: #e20d1c;
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: oswald;
}
body {
  background-color: #eee;
}
.popUp {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
  z-index: 50;
  background-color: #00000099;
  background-size: cover, 100% 125%, cover;
  background-position: center 200%;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: 0.1s 0.6s;
  * {
    pointer-events: none;
  }
  &-closer {
    position: fixed;
    top: 0em;
    right: 0em;
    height: 314vw;
    min-height: 314vh;
    width: 314vw;
    min-width: 314vh;
    z-index: 50;
    background-color: $c-primary;
    cursor: pointer;
    pointer-events: none;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    transform: translate(50%, -50%);
    transition: width 0.3s 0.25s ease-out, height 0.3s 0.25s ease-out,
      min-width 0.3s 0.25s ease-out, min-height 0.3s 0.25s ease-out,
      top 0.3s 0s cubic-bezier(0.15, 2, 0.9, 1.5),
      right 0.3s 0s cubic-bezier(0.15, 2, 0.9, 1.5),
      transform 0.3s 0s cubic-bezier(0.15, 2, 0.9, 1.5);
    &-barre {
      opacity: 0;
    }
  }
  &.open {
    transition: 0.1s 0s;
    opacity: 1;
    pointer-events: all;
    * {
      pointer-events: all;
    }
    .popUp-closer {
      transition: width 0.3s 0.1s ease-out, height 0.3s 0.1s ease-out,
        min-width 0.3s 0.1s ease-out, min-height 0.3s 0.1s ease-out,
        top 0.3s 0.35s cubic-bezier(0.1, -1, 0.85, -0.5),
        right 0.3s 0.35s cubic-bezier(0.1, -0.5, 0.85, -0.5),
        transform 0.3s 0.35s cubic-bezier(0.1, -0.5, 0.85, -0.5);
      transform: translate(0%, -0%);
      position: fixed;
      top: 1em;
      right: 1em;
      height: 3em;
      width: 3em;
      min-height: 3em;
      min-width: 3em;
      background-color: $c-primary;
      cursor: pointer;
      &-barre {
        opacity: 1;
        background-color: #fff;
        display: block;
        width: 1em;
        height: 4px;
        border-radius: 4px;
        position: absolute;
        top: calc(50% - 2px);
        left: 50%;
        transform-origin: 0% 50%;
        transition: opacity 0.4s 0.4s;
        @for $i from 1 to 5 {
          &:nth-of-type(#{$i}) {
            transform: rotate(#{45 + $i * 90}deg) translate(0, 0);
          }
        }
      }
      &:hover {
        animation: popUpCloserAnim 0.5s linear 0s 1 normal forwards;
        .popUp-closer-barre {
          @for $i from 1 to 5 {
            &:nth-of-type(#{$i}) {
              animation: popUpCloserBarreAnim#{$i}
                0.5s
                linear
                0s
                1
                normal
                forwards;
            }
          }
        }
      }
    }
  }
}
section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-allign: center;
  background-size: cover;
  background-position: center;
  background-image: url(https://images.unsplash.com/photo-1618935262538-2c8f334afca6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80);
  color: #fff;
  h1 {
    text-align: center;
    font-size: 5rem;
    font-weight: 700;
  }
  button {
    font-weight: 700;
    width: 7em;
    background: #000000;
    color: #fff;
    font-size: 2rem;
    border: solid thick #fff;
    padding: 0.5em;
    margin: 1em;
    box-shadow: 0em 0em inset #fff, 0em 0em inset #fff;
    transition: 0.3s;
    mix-blend-mode: screen;
    &:hover {
      color: #000;
      box-shadow: 3.5em 0em inset #fff, -3.5em 0em inset #fff;
    }
  }
}
@keyframes popUpCloserAnim {
  0% {
    border-bottom-left-radius: 50%;
  }
  20% {
    border-bottom-left-radius: 0%;
    border-top-left-radius: 50%;
  }
  40% {
    border-bottom-left-radius: 50%;
    border-top-left-radius: 0%;
    border-top-right-radius: 50%;
  }
  60% {
    border-top-left-radius: 50%;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 50%;
  }
  80% {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 0%;
  }
  100% {
    border-bottom-right-radius: 50%;
  }
}
@for $i from 1 to 5 {
  @keyframes popUpCloserBarreAnim#{$i} {
    #{20 * $i - 20}% {
      transform: rotate(#{45 + $i * 90}deg) translate(0em, 0);
    }
    #{20 * $i}% {
      transform: rotate(#{45 + $i * 90}deg) translate(0.5em, 0);
    }
    #{20 * $i + 20}% {
      transform: rotate(#{45 + $i * 90}deg) translate(0em, 0);
    }
  }
}
.body360 {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  pointer-events: none;
  &--center {
    .body360-content {
      right: 50%;
      transform: translate(50%, 0);
    }
  }
  &-content {
    color: $c-secondary;
    position: absolute;
    top: 2em;
    right: 2em;
    background-color: #fff;
    width: 540px;
    width: calc(100% - 4em);
    border-radius: 1em;
    height: calc(100% - 4em);
    overflow-y: scroll;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &::-webkit-scrollbar {
      width: 1em;
    }
    /* Track */
    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 0.5em;
    }
    /* Handle */
    &::-webkit-scrollbar-thumb {
      border-top-right-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
      border-top-left-radius: 0.15em;
      border-bottom-left-radius: 0.15em;
      background: $c-secondary;
      &:hover {
        background: $c-primary;
      }
    }
  }
  &-title {
    font-family: oswald;
    font-weight: 700;
    margin: 0 auto;
    width: 50%;
    text-align: center;
    font-size: 4rem;
    color: $c-tercary;
  }
  a {
    font-weight: normal;
  }
}

//Ipad Pro debout / Ipad couché
@media only screen and (min-width: 1024px) {
  .body360 {
    &-content {
      color: $c-secondary;
      position: absolute;
      top: 2em;
      right: 4em;
      background-color: #fff;
      width: 540px;
      max-width: calc(100% - 8em);
      border-radius: 1em;
      height: calc(100% - 4em);
      overflow-y: scroll;
      text-align: center;
    }
  }
}
View Compiled
window.addEventListener("load", function () {
  var openPopUps = document.querySelectorAll("button");
  for (let index = 0; index < openPopUps.length; index++) {
    openPopUps[index].addEventListener("click", openPopUp);
  }
  window.addEventListener("keydown", (event) => {
    if (event.code === "Escape") {
      closePopUp();
    }
  });
});

function openPopUp(event) {
  document.querySelector(".popUp").classList.add("open");
}

function closePopUp() {
  document.querySelector(".popUp").classList.remove("open");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.