<dialog> - 모달 구현

 <button id="button">버튼</button>
 <dialog class="dialog">
 	<button id="close" type="button">close</button>
 </dialog>

const button = document.querySelector("#button");
const dialog = document.querySelector(".dialog");

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

//close 버튼 클릭시 모달 닫기
const close = document.querySelector("#close");
close.addEventListener("click", () => {
  dialog.close();
});

//모달 바깥 클릭시 모달 닫기
dialog.addEventListener("click", (event) => {
  if (event.target.nodeName === "DIALOG") {
    dialog.close();
  }
});

---

https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog

<dialog>: 대화 상자 요소 - HTML: Hypertext Markup Language | MDN

https://ui.toast.com/posts/ko_20220518

dialog 요소가 가진 슈퍼 파워 알아보기