<dialog>
  <h2>Hello world!</h2>
  <p>Click on the button.</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<button onclick="document.querySelector('dialog').showModal()">Open Dialog</button>
@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,800;1,700&display=swap');

/*   IS-OPEN STATE   */
dialog[open] {
  translate: 0 0;
}

/*   EXIT STATE   */
dialog {
  transition: translate 0.7s ease-out, overlay 0.7s ease-out, display 0.7s ease-out allow-discrete;
  translate: 0 100vh;
  
  /* other styles */
  border: 6px solid;
  border-radius: 20px;
  box-shadow: 20px 20px 0 blue;
}

/*   0. BEFORE-OPEN STATE   */
@starting-style {
  dialog[open] {
    translate: 0 100vh;
  }
}

/* Etc */

body {
  padding: 1.5rem;
}

body,
button {
  font-family: Anybody, system-ui;
  font-size: 1.5rem;
}

button {
  padding: 1rem;
  background: linear-gradient(-45deg in oklch,  #f07030, blue);
  color: white;
  border: 6px solid #ff7b22;
  border-radius: 1rem;
}

h2, p {
  margin: 0;
}

p {
  margin-bottom: 2rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.