<section>
  <button type="button" id="showModal">showModal</button>
  <button type="button" id="show">show</button>
</section>


<dialog id="dialog" class="dialog">
  <h2>Hello nus3!</h2>
  <button type="button" id="close">Close</button>
</dialog>

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

.dialog:modal {
  background-color: #E7F6F2;
}

const dialog = document.getElementById("dialog");
const showBtn = document.getElementById("show");
const showModalBtn = document.getElementById("showModal");
const closeBtn = document.getElementById("close");

showBtn.addEventListener("click", () => {
  dialog.show();
});

showModalBtn.addEventListener("click", () => {
  dialog.showModal();
});

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