<dialog id="modal">
  	<p>Hi! This is a modal.</p>
  	<button id="hide-modal">OK</button>
</dialog>
<button id="show-modal">
  Show Modal
</button>
const modal = document.getElementById("modal");
const showModalBtn = document.getElementById("show-modal");
const hideModalBtn = document.getElementById("hide-modal");

showModalBtn.addEventListener('click', () => {
  modal.showModal();
});

hideModalBtn.addEventListener('click', () => {
  modal.close();
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.