<dialog id="dialog">
  <h2>Modal</h2>
  <p>The native dialog element, with all the good stuff it has built into it, presented as a modal.</p>
  <p>Ref: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank">mdn docs</a></p>
  <div>
    <button id="cancelBtn">Close</button>
  </div>
</dialog>

const showButton = document.getElementById('showDialog');
const closeButton = document.getElementById('cancelBtn');
const dialog = document.getElementById('dialog');

showButton.addEventListener('click', () => {
    dialog.showModal();
});

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

dialog.addEventListener("click", (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});