<header>Site Header</header>

<main id="main-content">
  <button id="open-dialog">Open modal</button>
  <p>This is the main content of the page.</p>
  <!-- More content here -->
</main>

<!-- Move the dialog outside the main element -->
<dialog id="dialog">
  <h2>Modal Title</h2>
  <div>
    All the modal content goes in here...
    <button id="close-dialog" autofocus>Close</button>
  </div>
</dialog>
html,
body {
  height: 100%;
  overflow: visible;
  font-family: sans-serif;
}
body {
  background-color: black;
  color: white;
}

main {
  display: flex;
  height: 80%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

button#open-dialog {
  background-color: #ff5f6d;
  color: inherit;
  border-radius: 5px;
  padding: 1rem 1.4rem;
  font-size: 1.4rem;
}

dialog {
  width: 60%;
  border: none;
  border-radius: 8px;
  animation: zoom-out 0.5s ease-out;
}

dialog[open] {
  animation: zoom-in 0.5s ease-out;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.1);
    display: none;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    display: block;
  }
}

@keyframes zoom-out {
  0% {
    opacity: 1;
    transform: scale(1);
    display: block;
  }
  100% {
    opacity: 0;
    transform: scale(0);
    display: none;
  }
}
const dialog = document.getElementById("dialog");
const mainContent = document.getElementById("main-content");
const openButton = document.getElementById("open-dialog");
const closeButton = document.getElementById("close-dialog");

openButton.addEventListener("click", () => {
  mainContent.setAttribute("inert", "");
  dialog.showModal();
});

closeButton.addEventListener("click", () => {
  dialog.close();
});

dialog.addEventListener("close", () => {
  mainContent.removeAttribute("inert");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.