<dialog class="dialog">
  <button autofocus>Close</button>
  <p>This modal dialog has a groovy backdrop!</p>
</dialog>
<button>Show the JS dialog</button>

<dialog open class="mydialog">
  <button disabled autofocus>Close</button>
  <p>This is the non js modal</p>
</dialog>

<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>
<p>content to scroll</p>

::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}
dialog {
  width: 50%;
}

.mydialog[open] {
  position: fixed;
  inset: 0 0 0 0;
  margin: auto;
  background: #f9f9f9;
  outline: 5px solid red; /* just so we can see where it is */
}

const dialog = document.querySelector(".dialog");
const dialog2 = document.querySelector(".mydialog");
const showButton = document.querySelector(".dialog + button");
const closeButton = document.querySelector(".dialog button");
const closeButton2 = document.querySelector(".mydialog button");

// "Show the dialog" button opens the dialog modally
showButton.addEventListener("click", () => {
  dialog.showModal();
});

// "Close" button closes the dialog
closeButton.addEventListener("click", () => {
  dialog.close();
});
closeButton2.addEventListener("click", () => {
  dialog2.close();
});