<button type="button" id="open">OPEN</button>

<dialog class="dialog">
  <div class="close">
    <button type="button" id="close" aria-label="CLOSE"></button>
  </div>

  <div class="inner">
    <h1>Dialog</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <div class="bar"></div>
    <p>Congue suspendisse sollicitudin fringilla sollicitudin aenean purus aliquet. Nisl vulputate nascetur fusce tortor euismod quis lacinia ante. Dictum montes interdum feugiat feugiat litora metus. Consectetur torquent non non etiam phasellus dolor malesuada dis. Torquent netus eros elit; viverra nibh iaculis. Maximus ultricies nisi nunc lacinia molestie morbi gravida tristique.</p>
  </div>
</dialog>

#open {
  padding: 1em 4em;
  color: #fff;
  background: #634fcc;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.25em;
  transition: background 250ms ease;
}

#open:hover {
  background: #2d1c85;
}

.close {
  position: sticky;
  top: 12px;
  z-index: 1;
  height: 0;
}

.close #close {
  position: relative;
  display: block;
  width: 46px;
  height: auto;
  aspect-ratio: 1;
  margin: 0 12px 0 auto;
  padding: 0;
  background: #bbb;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: background 250ms ease;
}

.close #close:hover {
  background: #919191;
}

.close #close::before,
.close #close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 50%;
  height: 2px;
  background: #000;
  translate: -50% -50%;
}

.close #close::before {
  rotate: -45deg;
}

.close #close::after {
  rotate: 45deg;
}

.dialog {
  padding: 0;
  border-radius: 16px;
  border: none;
}

.dialog::backdrop {
  background: rgb(0 0 0 / 65%);
}

.inner {
  padding: 1em;
}

.bar {
  height: 2000px;
}

document.getElementById("open").addEventListener("click", () => {
  document.querySelector(".dialog").showModal();
});

document.getElementById("close").addEventListener("click", () => {
  document.querySelector(".dialog").close();
});