<dialog id="dialog">
  <button id="closeBtn">X</button>
  <p>Dialog Content</p>
</dialog>

<button id="showBtn">Show Modal</button>

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

const dialog = document.getElementById('dialog');
const closeBtn = document.getElementById('closeBtn');
const showBtn = document.getElementById('showBtn');

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

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

dialog.addEventListener('close', () => {
  console.log('close');
});

dialog.addEventListener('cancel', () => {
  console.log('cancel');
});